{% load static i18n %}
<div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
    <button
        hx-get="{% url 'meeting-single-view' previous %}?requests_ids={{requests_ids}}" hx-target="#objectDetailsModalTarget"
        class="oh-modal__diaglog-nav oh-modal__nav-prev">
        <ion-icon name="chevron-back-outline" class="md hydrated" role="img"
        aria-label="chevron back outline"></ion-icon>
    </button>

    <button
        hx-get="{% url 'meeting-single-view' next %}?requests_ids={{requests_ids}}" hx-target="#objectDetailsModalTarget"
        class="oh-modal__diaglog-nav oh-modal__nav-next">
        <ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
        aria-label="chevron forward outline"></ion-icon>
    </button>
</div>
<div class="oh-modal__dialog-header">
    <span
      class="oh-modal__dialog-title"
        >
      {% trans "Details" %}
    </span>
    <button class="oh-modal__close" aria-label="Close">
      <button  class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');" ><ion-icon  name="close-outline"></ion-icon></button>
    </button>
</div>
<div class="oh-modal__dialog-body  oh-modal__dialog-relative">
    <a class="oh-timeoff-modal__profile-content" style="text-decoration:none;"
        >
        <div class="oh-profile mb-2">
          <div class="oh-profile__avatar">
            <img
              src="https://ui-avatars.com/api/?name={{meeting.title}}&background=random"
              class="oh-profile__image me-2"
              alt=""
            />
          </div>
          <div class="oh-timeoff-modal__profile-info">
            <span class="oh-timeoff-modal__user fw-bold"
              >{{meeting.title}}</span
            >
          </div>
        </div>
    </a>

    <div class="oh-modal__dialog-header pt-0" >
        <div class="oh-timeoff-modal__stats-container mt-3">
            <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-count">{% trans "Date" %}</span>
                <span class="oh-timeoff-modal__stat-title ">{{meeting.date}}</span>
            </div>
            <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-count">{% trans "Question Template" %}</span>
                <span class="oh-timeoff-modal__stat-title ">{{meeting.question_template}}</span>
            </div>
        </div>

        <div class="oh-timeoff-modal__stats-container">
            <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-count">{% trans "Employees" %}</span>
                <span class="oh-timeoff-modal__stat-title">
                    {% for employee in meeting.employee_id.all %}
                    {{employee.get_full_name}},
                    {% endfor %}
                </span>
            </div>
            <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-count">{% trans "Managers" %}</span>
                <span class="oh-timeoff-modal__stat-title">
                    {% for manager in meeting.manager.all %}
                    {{manager.get_full_name}},
                    {% endfor %}
                </span>
            </div>
        </div>

        <div class="oh-timeoff-modal__stats w-100 mt-3">
            <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-count">{% trans "Answerable employees" %}</span>
                <span class="oh-timeoff-modal__stat-title ">
                    {% for employee in meeting.answer_employees.all %}
                    {{employee.get_full_name}},
                    {% endfor %}
                </span>
            </div>
        </div>

        <div class="oh-timeoff-modal__stats w-100 mt-3">
            <div class="oh-timeoff-modal__stat">
                <span class="oh-timeoff-modal__stat-count">{% trans "Minutes of Meeting" %}</span>
                <div class="oh-timeoff-modal__stat-description">{{meeting.response|default:""|safe}}</div>
            </div>
        </div>

    </div>
    <div class="oh-modal__button-container text-center mt-3">
        <div class="oh-btn-group">
            <button data-toggle="oh-modal-toggle" data-target="#objectCreateModal" hx-target="#objectCreateModalTarget" hx-get="{% url 'create-meeting' %}?instance_id={{meeting.id}}" type="submit" class="oh-btn oh-btn--info w-100" title="dit">
                <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="information circle outline"></ion-icon>
            </button>

            <form
                action="{% url 'meetings-delete' meeting.id %}"
                onsubmit="return confirm('{% trans "Are you sure to delete this meeting?" %}')"
                method="post"
                style="display: contents;width:100%">
                {% csrf_token %}
                <button onclick="event.stopPropagation()" class="oh-btn oh-btn--secondary  w-100" title="{% trans 'Delete' %}">
                <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
                </button>
            </form>

        </div>
    </div>
</div>