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

<div class="oh-wrapper">
    {% include 'skill_zone/skill_zone_nav.html' %}
    <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
        <div id="skill_zone_container">
            <div class="oh-empty">
                <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
                <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
                <p class="oh-empty__subtitle">{% trans "There are currently no skill zone to consider." %} </p>
            </div>
        </div>
    </main>
</div>

<div class="oh-modal" id="editCandModal" 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="editCandTarget"></div>
    </div>
</div>
<div class="oh-modal" id="createModal" 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="createTarget"></div>
    </div>
</div>
{% endblock %}