{% comment %} {% extends "index.html" %} {% endcomment %}
{% load i18n %}
{% load static %}
{% load basefilters %}
{% block content %}



  <section class="oh-wrapper oh-main__topbar oh-announcement_topbar" x-data="{searchShow: false}">
    <div class="oh-main__titlebar oh-main__titlebar--left">
        <h1 class="oh-main__titlebar-title fw-bold">{% trans "Announcements" %}</h1>
    </div>
    {% if perms.announcemnt.add_announcemnt or request.user|is_reportingmanager %}
      <div class="oh-main__titlebar oh-main__titlebar--right">
          <div class="oh-main__titlebar-button-container">
              <div class="oh-btn-group ml-2">
                  <button class="oh-btn oh-btn--secondary oh-btn--shadow" hx-get='{% url "create-announcement" %}'
                      hx-target="#createannouncementForm" hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#anouncementModal">
                      <ion-icon class="me-1" name="add-outline"></ion-icon>{% trans "Create" %}</button>
              </div>
          </div>
      </div>
    {% endif %}
  </section>

  <div class="oh-wrapper">
    {% for anoun in announcements %}
      <div class="oh-announcement_feed-card">
          <div class="oh-announcement_header">
              <div>
                  <span class="oh-announcement-headline">{{ anoun.title }}</span><br>
                  <span class="oh-announcement-timing"><small>
                    {% trans "Posted on" %} &nbsp<span class="dateformat_changer">{{ anoun.created_at|date:"F j, Y" }}</span> &nbsp
                    {% trans "at" %} &nbsp <span class="timeformat_changer">{{ anoun.created_at|time:"g:i A" }}</span></small>
                  </span>

              </div>
              <span>
                {% if perms.announcemnt.add_announcemnt or request.user|is_reportingmanager %}
                  <div class="oh-dropdown" x-data="{show: false}">
                      <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title='{% trans "Actions" %}'>
                          <ion-icon name="ellipsis-vertical-sharp" role="img" class="md hydrated"
                              aria-label="ellipsis vertical sharp"></ion-icon>
                      </button>
                      <div class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right"
                          x-show="show" @click.outside="show = false">
                          <ul class="oh-dropdown__items">
                              <li class="oh-dropdown__item">
                                  <a hx-get='{% url "update-announcement" anoun.id %}' hx-target='#announcementUpdate' data-toggle='oh-modal-toggle' data-target="#announcementUpdateModal" class="oh-dropdown__link">{% trans "Edit" %}</a>
                              </li>
                              <li class="oh-dropdown__item">
                                <form
                                    action = "{% url 'delete-announcement' anoun.id %}"
                                    onsubmit="return confirm('{% trans "Are you sure you want to delete this announcement?" %}');"
                                    method='post'
                                    action=""
                                    >
                                    {% csrf_token %}
                                    <button type="submit" class="oh-dropdown__link oh-dropdown__link--danger">
                                        {% trans "Delete" %}
                                    </button>
                                </form>
                              </li>
                          </ul>
                      </div>
                  </div>
                {% endif %}
              </span>
          </div>
          <div class="oh-announcement-body">
              <p class="oh-announcement_text">{{ anoun.description|safe }}</p>

              {% if anoun.department.all %}
                <div class="oh-announcement-hastag__container">
                    <span class="oh-announcement-headline">{% trans "Department" %}</span>
                    <div class="oh-announcement-hashtags" >
                      {% for dep in anoun.department.all %}
                        <span class="oh-announcement__tags fw-bold">#{{ dep.department }}</span>
                      {% endfor %}
                    </div>
                </div>
              {% endif %}


              {% if anoun.job_position.all %}
                <div class="oh-announcement-hastag__container">
                    <span class="oh-announcement-headline">{% trans "Job Position" %}</span>
                    <div class="oh-announcement-hashtags">
                      {% for job in anoun.job_position.all %}
                        <span class="oh-announcement__tags fw-bold">#{{ job.job_position }}</span>
                      {% endfor %}
                    </div>
                </div>
              {% endif %}

              {% for attachment in anoun.attachments.all %}
                {% if  anoun.attachments.all|length > 1 %}
                    <hr>
                {% endif %}
                {% if attachment.file.url|slice:"-4:" == '.png' or attachment.file.url|slice:"-4:" == '.jpg' or attachment.file.url|slice:"-5:" == '.jpeg' or attachment.file.url|slice:"-4:" == '.gif' or attachment.file.url|slice:"-4:" == '.bmp' or attachment.file.url|slice:"-5:" == '.webp' or attachment.file.url|slice:"-5:" == '.tiff' or attachment.file.url|slice:"-4:" == '.tif' or attachment.file.url|slice:"-4:" == '.svg' %}
                  <!-- If not a PDF, display the image -->
                  <div class="oh-announcement-img_container">
                    <a href="{{ attachment.file.url }}" target="_blank">
                      <img src="{{ attachment.file.url }}" alt="" class="oh-posted_img"></a>
                  </div>
                {% else %}
                  <div class="oh-helpdesk_attached--content">
                    <div class="oh-helpdesk__attachment-icon">
                      <a href="{{ attachment.file.url }}" target="_blank"><span class="oh-file-icon oh-file-icon--pdf"></span></a>
                    </div>
                    <a href="{{ attachment.file.url }}" target="_blank"><span class="oh-helpdesk__filename">{% trans "View Attachment" %}</span></a>
                  </div>
                {% endif %}
              {% endfor %}


                <div class="oh-announcement__comment-view">
                    <button class="oh-btn me-1 oh-announcement-btn" hx-get='{% url "announcement-add-comment" anoun.id %}' type="button"  title="Add Comment" hx-target="#commentForm"
                        hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#commentModal">
                        <ion-icon name="chatbox-outline" class="md hydrated" role="img" aria-label="chevron back outline"></ion-icon>
                      </button>
                      <button class="oh-btn me-1 oh-announcement-btn" type="button" hx-get="{% url 'announcement-view-comment' anoun.id %}"  hx-target="#commentviewTarget" data-toggle='oh-modal-toggle'
                        data-target ='#commentviewModal' title="View Comment"  class="oh-btn oh-btn--light">
                        <ion-icon name="eye-outline" class="md hydrated" role="img" aria-label="chevron back outline"></ion-icon>
                      </button>
                </div>
          </div>

      </div>
      {% endfor %}
  </div>

  <!--********************************************************************************************************-->
  <!--********************************************************************************************************-->
  <!--********************************************************************************************************-->


    <!-- Pagination section start -->

    <div class="oh-pagination">
        <span class="oh-pagination__page">
          {% trans "Page" %} {{ announcements.number }} {% trans "of" %} {{ announcements.paginator.num_pages }}.
        </span>
        <nav class="oh-pagination__nav">
          <div class="oh-pagination__input-container me-3">
            <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
            <input
              type="number"
              name="page"
              class="oh-pagination__input"
              value="{{announcements.number}}"
              min="1"
            />
            <span class="oh-pagination__label"
              >{% trans "of" %} {{announcements.paginator.num_pages}}</span
            >
          </div>
          <ul class="oh-pagination__items">
            {% if announcements.has_previous %}
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a
                href="?page=1"
                class="oh-pagination__link"
                >{% trans "First" %}</a
              >
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a
                href="?page={{ announcements.previous_page_number }}"
                class="oh-pagination__link"
                >{% trans "Previous" %}</a
              >
            </li>
            {% endif %} {% if announcements.has_next %}
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a
                href="?page={{ announcements.next_page_number }}"
                class="oh-pagination__link"
                >{% trans "Next" %}</a
              >
            </li>
            <li class="oh-pagination__item oh-pagination__item--wide">
              <a
                href="?page={{ announcements.paginator.num_pages }}"
                class="oh-pagination__link"
                >{% trans "Last" %}</a
              >
            </li>
            {% endif %}
          </ul>
        </nav>
    </div>

    <!-- Pagination section end -->

</div>

<!-- start of comment modal -->
<div
	class="oh-modal"
	id="commentModal"
	role="dialog"
	aria-labelledby="emptagModal"
	aria-hidden="true"
  >
	<div class="oh-modal__dialog">
		<div class="oh-modal__dialog-header">
			<h2 class="oh-modal__dialog-title" id="createModalTitle">
				{% trans "Add Comment." %}
			</h2>
			<button class="oh-modal__close" aria-label="Close">
				<ion-icon name="close-outline"></ion-icon>
			</button>
		</div>
		<div class="oh-modal__dialog-body" id="commentForm"></div>
	</div>
</div>
<!-- end of comment modal -->

<!-- start of comment view modal -->
<div
  class="oh-modal" style="z-index: 60;"
  id="commentviewModal"
  role="dialog"
  aria-labelledby="commentviewModal"
  aria-hidden="true"
>
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h2
        class="oh-modal__dialog-title"
        id=""
      >
        {% trans "Comments." %}
      </h2>
      <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>
    <div
      class="oh-modal__dialog-body oh-modal__dialog-relative"
      id="commentviewTarget"
    ></div>
  </div>
</div>

<!-- end of comment view modal -->

{% endblock content %}