{% extends 'index.html' %}
{% block content %}
{% load i18n %}
{% load static %}
{% load basefilters %}


<h1>

</h1>
{% 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 ml-2">
              <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>

  <!-- 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>

<div
class="oh-wrapper-main"
>
  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">

    <div class="oh-wrapper">
      <div class="oh-404">
          <img style="    width: 190px;height: 190px;" src="{% static 'images/ui/deadline.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
          <h5 class="oh-404__subtitle">{% trans "No time periods have been created." %}</h5>
      </div>
    </div>
  </main>
</div>
</div>

{% endblock content %}