{% extends 'settings.html' %}
{% block settings %}
{% include "generic/components.html" %}
<meta name="csrf-token" content="{{ csrf_token }}">

  {% load i18n static %}
  <div class="oh-inner-sidebar-content">
    {% comment %} <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> {% endcomment %}
      {% if perms.recruitment.add_rejectreason %}
      <div hx-get="{% url "skills-nav-view" %}" hx-trigger="load">
      </div>
        {% comment %} <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> {% endcomment %}
      {% endif %}
    </div>
    {% comment %} {% if skills|length %} {% endcomment %}
          <div
          class="oh-checkpoint-badge mb-2"
          id="selectedInstances"
          data-ids="[]"
          data-clicked=""
          style="display: none"
        ></div>
        <div class="oh-wrapper" id="listContainer">
          <div class="animated-background">
        </div>
        </div>
      {% comment %} {% include 'settings/skills/skills_list.html' %} {% endcomment %}
    {% comment %} {% 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 %} {% endcomment %}
  </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>

<script src="{% static 'cbv/deleteFunc.js' %}"></script>
{% endblock %}