{% load i18n %}
{% load static %}
{% load basefilters %}
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">

    <div class="oh-main__titlebar oh-main__titlebar--left">
        <span class="oh-main__titlebar-title fw-bold mb-0 text-dark">{% trans "Announcement." %} </span>
    </div>

</section>

{% for anoun in announcements %}
        <div class="card mx-auto p-4" style="max-width: 800px; margin-bottom: 60px; border:1px solid lightgrey;
                                         border-radius:10px; box-shadow: 2px 2px 2px grey;">

            {% if perms.base.change_announcement or perms.base.delete_announcement %}
                <div class="oh-dropdown float-end" x-data="{open: false}">
                    <button
                        class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn"
                        @click="open = !open"
                        @click.outside="open = false"
                        title='{% trans "Actions" %}'
                    >
                        <ion-icon
                        name="ellipsis-vertical"
                        ></ion-icon>
                    </button>
                    <div
                        class="oh-dropdown__menu oh-dropdown__menu--right"
                        x-show="open"
                        style="display: none;"
                    >
                        <ul class="oh-dropdown__items">
                            {% if perms.base.change_announcement %}
                                <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"
                                    style="cursor:pointer;" >{% trans "Edit" %}</a
                                    >
                                </li>
                            {% endif %}
                            {% if perms.base.delete_announcement %}
                                <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>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            {% endif %}

            <div class="card-header mb-3">
                <h5 class="card-title fw-bold">{{ anoun.title }}
                    {% if perms.base.view_announcement %}
                    <div data-toggle="oh-modal-toggle" hx-target="#viewedByBody" hx-get="{% url 'announcement-viewed-by' %}?announcement_id={{anoun.id}}" data-target="#viewedBy" title="{{anoun.get_views|length}} {% trans "Views" %}" class="oh-checkpoint-badge text-success mb-2" id="selectAllInstances" style="cursor: pointer">
                        <span>{{anoun.get_views|length}}</span>
                        <span align="center">
                            <ion-icon name="eye-outline"></ion-icon>
                        </span>
                    </div>
                    {% endif %}
                </h5>

                <span class="text-muted fw-bold"><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>

            <div class="card-body">
                <p class="card-text">{{ anoun.description|safe }}</p>
            </div>


            <div class="card-footer">
                {% 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 -->
                        <a href="{{ attachment.file.url }}" target="_blank">
                            <img style="max-width: 538px;" src="{{ attachment.file.url }}" class="img-fluid rounded" alt="Attachment Image"></a>
                    {% else %}
                        <!-- If the file is a PDF or something, display a link to download -->
                        <i><a href="{{ attachment.file.url }}" class='text-danger fw-bold' target="_blank">
                            <span class="oh-file-icon  oh-file-icon--pdf"></span>{% trans "View Attachment" %}</a></i>
                    {% endif %}
                {% endfor %}
            </div>


            <div class="card-footer mt-2">

                <div class="oh-announcement__comment-view">

                    {% if anoun.department.all or anoun.job_position.all %}
                        <button class="oh-btn me-1 oh-announcement-btn" type="button" onmouseover="showDetails()" onmouseout="hideDetails()">
                            <ion-icon name="information"></ion-icon>
                        </button>
                    {% endif %}
                    {% if not anoun.disable_comments %}
                        <button class="oh-btn oh-btn--light oh-activity-sidebar__open" type="button" hx-get="{% url 'announcement-view-comment' anoun.id %}"  hx-target="#commentContainer"
                            data-target ='#activitySidebar' title="Comments">
                            <ion-icon name="chatbox-outline" style="font-size:18px;" class="md hydrated" role="img" aria-label="chevron back outline"></ion-icon>
                        </button>
                    {% endif %}

                </div>

            </div>


            <div id="infoDiv" style="display:none;">
                {% if anoun.department.all %}
                    <div class="oh-announcement-hastag__container" style="z-index:1000">
                        <span class="oh-announcement-hashtags" style="font-size:0.8rem;">{% trans "Department" %}</span>
                        <div class="oh-announcement-hashtags">
                            {% for dep in anoun.department.all %}
                                <span class="oh-announcement__tags">#{{ dep.department }}</span>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}

                {% if anoun.job_position.all %}
                    <div class="oh-announcement-hastag__container">
                        <span class="oh-announcement-hashtags" style="font-size:0.8rem;">{% trans "Job Position" %}</span>
                        <div class="oh-announcement-hashtags">
                            {% for job in anoun.job_position.all %}
                                <span class="oh-announcement__tags">#{{ job.job_position }}</span>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>

        </div>
        {% endfor %}

        <div  class="oh-modal" id="viewedBy" role="dialog" aria-hidden="true">
            <div  class="oh-modal__dialog" style="max-width: 550px">
              <div  class="oh-modal__dialog-header">
                <button  class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');" ><ion-icon  name="close-outline"></ion-icon></button>
              </div>

              <div class="oh-modal__dialog-body" id="viewedByBody"></div>
            </div>
          </div>