{% load i18n %}
{% load static %}
{% load basefilters %}
<div class="oh-modal__dialog-header">
    <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>
    <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
    </button>
</div>
<div class="oh-modal__dialog-body">
    {% 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='#objectUpdateModalTarget'
                                    data-toggle='oh-modal-toggle' data-target="#objectUpdateModal"
                                    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>
</div>
</div>