{% extends "layout.html" %}
{% block title_name %} - {{ _('types')|uc_first }}{% endblock %}
{% block breadcrumb %}
    {{ [_('types')]|crumb }}
{% endblock %}
{% block content %}
    <div class="toolbar">
        {{ 'Form_field_type'|manual_link }}
    </div>
    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" role="tab" aria-selected="true"
                                    href="#menu-tab-system">{{ _('system types')|uc_first }}</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" aria-selected="false"
                                    href="#menu-tab-custom">{{ _('custom types')|uc_first }}</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" aria-selected="false"
                                    href="#menu-tab-value">{{ _('value types')|uc_first }}</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" aria-selected="false"
                                    href="#menu-tab-places">{{ _('places')|uc_first }}</a></li>
        </ul>
        <div class="tab-content" id="menuTabContent">
            {% for type_ in ['system', 'custom', 'value', 'places'] %}
                <div class="tab-pane fade" role="tabpanel" id="menu-tab-{{ type_ }}" style="padding: 0;">

                    <div class="accordion" id="TypeAccordion">
                        {% for node, tree in nodes[type_].items() %}
                            <div class="card">
                                <div class="card-header accordionheader" id="heading-{{ node.id }}">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                            data-target="#collapse-{{ node.id }}" aria-expanded="true"
                                            aria-controls="collapse-{{ node.id }}">
                                        {{ node.name }}
                                    </button>
                                </div>
                                <div id="collapse-{{ node.id }}" class="collapse" aria-labelledby="headingOne"
                                     data-parent="#TypeAccordion">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6 contentbox">
                                                <div class="toolbar">
                                                    {% if node.locked or not 'editor'|is_authorized %}
                                                        <input
                                                                class="tree-filter"
                                                                id="{{ node.name|sanitize }}-tree-search"
                                                                placeholder="{{ placeholder|uc_first }}"
                                                                name="name_search"
                                                                style="width:8em;"
                                                                type="text">
                                                    {% else %}
                                                        <form method="post"
                                                              action="{{ url_for('node_insert', root_id=node.id) }}"
                                                              style="display: inline;"
                                                        >
                                                            <input type="hidden" name="csrf_token"
                                                                   value="{{ csrf_token() }}">
                                                            <input
                                                                    class="tree-filter"
                                                                    id="{{ node.name|sanitize }}-tree-search"
                                                                    placeholder="{{ placeholder|uc_first }}"
                                                                    name="name_search"
                                                                    style="width:8em;"
                                                                    type="text">
                                                            {% if not node.locked %}
                                                                <input type="hidden" name="mode" value="insert">
                                                                <button class="{{ config['CSS']['button']['primary'] }}"
                                                                        type="submit" value="insert"
                                                                        name="add-node-submit">+
                                                                </button>

                                                            {% endif %}
                                                        </form>
                                                    {% endif %}
                                                    {% if type_ in ['custom', 'value'] and 'manager'|is_authorized %}
                                                        {{ _('edit')|button(url_for('hierarchy_update', id_=node.id)) }}
                                                        {% if not node.system and node.count < 1 and not node.subs %}
                                                            {{ _('delete')|button(url_for('hierarchy_delete', id_=node.id),
                                                                  onclick="return confirm('" + _('delete')|uc_first + " " + node.name.replace("'", '').replace('"', '') + "?');") }}
                                                        {% endif %}
                                                    {% endif %}
                                                </div>
                                                {{ tree|safe }}
                                            </div>
                                            <div class="col-5 contentbox">
                                                {% if not node.value_type %}
                                                    <p>
                                                        <strong>{{ _('selection')|uc_first }}</strong>:
                                                        {{ _('multiple') if node.multiple else _('single') }}
                                                    </p>
                                                {% endif %}
                                                {% if node.forms %}
                                                    <p style="margin-top:0;">
                                                        <strong>{{ _('forms')|uc_first }}</strong>:
                                                        {% for id, form in node.forms.items() %}
                                                            {{ form['name'] }}{{ "," if not loop.last }}
                                                        {% endfor %}
                                                    </p>
                                                {% endif %}
                                                {% if node.description %}
                                                    <div class="description">
                                                        <h2>{{ _('description')|uc_first }}</h2>
                                                        <p>{{ node.description }}</p>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="clear:both;"></div>
                                {{ tree|safe }}
                            </div>
                        {% endfor %}
                        {% if type_ in ['custom', 'value'] and 'manager'|is_authorized %}
                            <span style="margin:1em;">{{ _('type')|button(url_for('hierarchy_insert', param=type_)) }}</span>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <script>
        $(document).ready(function () {
            if (location.hash) {
                let url = location.href.replace(/\/$/, "");
                const hash = url.split("#");
                if (hash[1] == 'menu-tab-system') $('#menu-tab-system').tab('show');
            }
            else {
                $('#menu-tab-system').tab('show');
            }

        });
    </script>
{% endblock %}