{% extends 'index.html' %} {% load i18n %} {% block content %} {% load basefilters %}
{% if messages %}
{% for message in messages %}
<div class="oh-wrapper">
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{message.tags}} ">
      {{message}}
    </div>
  </div>
</div>
{% endfor %}
{% endif%}


<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
  <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
    <div class="oh-main__titlebar oh-main__titlebar--left">
      <h1 class="oh-main__titlebar-title fw-bold"> {% trans "Period" %}
      </h1>
    </div>
    {% if perms.pms.add_period or request.user|filtersubordinates %}
      <div class="oh-main__titlebar oh-main__titlebar--right">
        <div class="oh-main__titlebar-button-container">
          <div class="oh-btn-group">
              <a class="oh-btn oh-btn--secondary" role="button" data-toggle="oh-modal-toggle"
              data-target="#PeriodModal" hx-get="{%url 'period-create' %}"  hx-target="#periodModalTarget">
                <ion-icon name="add-outline"></ion-icon>
                {% trans "Create" %}
              </a>
          </div>
        </div>
      </div>
    {% endif %}
  </section>

  <!-- start of sticky table -->
  <div class="oh-wrapper" id="periodListTable">
      {% include "period/period_list.html" %}
  </div>
  <!-- End of Sticky Table -->

  <!-- period modal -->
  <div class="oh-modal" id="PeriodModal" role="dialog" aria-labelledby="editKeyResultModal" aria-hidden="true">
    <div class="oh-modal__dialog">
      <!-- for creating period -->
      <div class="oh-modal__dialog-header">
        <button type="button" class="oh-modal__close" aria-label="Close"
                hx-get="{% url 'period-hx-view' %}" hx-target="#periodListTable">
          <ion-icon name="close-outline"></ion-icon>
        </button>
      </div>
      <div class="oh-modal__dialog-body" id="periodModalTarget"></div>
    </div>
  </div>
  <!-- end of period modal -->



</main>


{% endblock content %}