butler_ddochi/board_notice/templates/board_notice/notice_detail.html

{% extends "components/base.html" %}
{% block title %}Notice{% endblock %}

{% block main_area %}
  <!-- Title -->
  <h1 class="mt-4">{{ notice.title }}</h1>
  <!-- Author -->
  <div class="text-muted fst-italic mb-2">{{ notice.created_at }}
    <br>
    by.
    {{ notice.author | upper }}</div>
  <!-- Rendered Markdown Content -->
  <div>
    {{ notice.render_markdown|safe }}
  </div>
  <hr>

  {% if request.user == notice.author %}
    <div class="d-flex mt-3">
      <a href="{% url 'board_notice:notice_list' %}" class="btn btn-secondary me-2">List</a>
      <a href="{% url 'board_notice:update_notice' notice.pk %}" class="btn btn-warning me-2">Edit</a>
      <form method="POST" action="{% url 'board_notice:delete_notice' notice.pk %}" class="d-inline" id="delete-form">
        {% csrf_token %}
        <button type="button" class="btn btn-danger" id="delete-button">Delete</button>
      </form>
    </div>
  {% endif %}

  <!-- Highlight.js Styles -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
  <!-- Highlight.js Script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
  <script>
    // Initialize Highlight.js
    document.addEventListener("DOMContentLoaded", () => {
      document
        .querySelectorAll("pre code")
        .forEach((block) => {
          hljs.highlightElement(block);
        });
    });
  </script>
  <!-- Delete Notice -->
  <script>
    document
      .getElementById("delete-button")
      .addEventListener("click", function () {
        const confirmed = confirm("Are you sure you want to delete this Notice?");
        if (confirmed) {
          document
            .getElementById("delete-form")
            .submit();
        }
      });
  </script>
{% endblock %}