{% extends 'index.html' %}
{% block content %}
{% 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">
            <div style="display: flow;">
                <h1 class="oh-main__titlebar-title fw-bold">{% trans "Organization Chart" %}</h1>
                <select id="mangerSelect" class="oh-select {% if not reporting_manager_dict %} d-none {% endif %}" style="
                    align-items: center;
                    background-color: #fff;
                    border: 1px solid #aaa;
                    border-radius: 2px;" name="manager_id" title="{% trans 'Reporting Managers' %}"
                    hx-post="{% url 'organisation-chart' %}" hx-target="#chart_target">
                    {% for manager_id, values in reporting_manager_dict.items %}
                        <option value="{{ manager_id }}" {% if act_manager_id == manager_id %} selected {% endif %}>{{ values }}</option>
                    {% endfor %}

                </select>
            </div>
            <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-input-group oh-input__search-group"
                :class="searchShow ? 'oh-input__search-group--show' : ''">
                <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left"></ion-icon>
                <input type="text" class="oh-input oh-input__icon" aria-label="Search Input" placeholder="Search"
                    id="key-word" />
            </div>
        </div>
    </section>
    <div class="oh-wrapper" id="chart_target">
    </div>
</main>
<script>
    $(document).ready(function(e) {
        htmx.trigger('#mangerSelect', 'change');
    })
</script>
{% endblock %}