{% extends 'settings.html' %}
{% block settings %}
  {% load i18n static %}
  <div class="oh-inner-sidebar-content">
    <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
      <h2 class="oh-inner-sidebar-content__title">{% trans 'Skills' %}</h2>
      {% if perms.recruitment.add_rejectreason %}
        <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" hx-get="{% url 'create-skills' %}" hx-target="#objectCreateModalTarget">
          <ion-icon name="add-outline" class="me-1"></ion-icon>
          {% trans 'Create' %}
        </button>
      {% endif %}
    </div>
    {% if skills|length %}
      {% include 'settings/skills/skills_list.html' %}
    {% else %}
      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
        <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/customer-support.png' %}" class="" alt="Page not found. 404." />
        <h5 class="oh-404__subtitle">{% trans 'There are no skills added at this moment.' %}</h5>
      </div>
    {% endif %}
  </div>

  <div class="oh-modal" id="skillsModal" role="dialog" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width: 550px">
      <div class="oh-modal__dialog-header">
        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
      </div>

      <div class="oh-modal__dialog-body" id="skillsModalBody"></div>
    </div>
  </div>
{% endblock %}