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

<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 "Contracts" %}</h1>
      <a
        class="oh-main__titlebar-search-toggle"
        role="button"
        aria-label="Toggle Search"
        @click="searchShow = !searchShow"
      >
        <ion-icon
          name="search-outline"
          class="oh-main__titlebar-serach-icon"
        ></ion-icon>
      </a>
    </div>
    <div class="oh-main__titlebar oh-main__titlebar--right">

      <div class="oh-main__titlebar-button-container">
        <div class="oh-btn-group ml-2">
          {% if perms.payroll.add_contract %}
            <div>
              <a
                class="oh-btn oh-btn--secondary oh-btn--shadow"
                href="{% url 'contract-create' %}"
              >
                <ion-icon class="me-2" name="add-outline"></ion-icon>
                {% trans "Create" %}
              </a>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </section>
</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/no_request.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
          <h5 class="oh-404__subtitle">{% trans "There have been no contracts signed." %}</h5>
      </div>
    </div>
  </main>
</div>
</div>
{% endblock content %}
