{% extends "layout.html" %}
{% block content %}
  {{ buttons|button_bar|safe }}
  <script src="/static/node_modules/chart.js/dist/chart.umd.js"></script>
  <script src="/static/node_modules/chartjs-plugin-autocolors/dist/chartjs-plugin-autocolors.min.js"></script>
  <script>
    const autocolors = window['chartjs-plugin-autocolors'];
  </script>
  <ul class="nav nav-pills bg-gray p-1" role="tablist">
    {% for category in types %}
      <li class="nav-item">
        <a
            class="py-1 nav-link"
            data-bs-toggle="tab"
            role="tab"
            aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}"
            href="#menu-tab-{{ category }}">
          {{ category|uc_first + ' ' + _('types') }}
        </a>
      </li>
    {% endfor %}
  </ul>
  <div class="tab-content py-2" id="menuTabContent">
    {% for category in types %}
      <div class="tab-pane fade" role="tabpanel" id="menu-tab-{{ category }}" style="padding: 0;">
        <div class="accordion accordion-flush" id="TypeAccordion-{{ category }}">
          {% if category in ['custom', 'value'] and 'manager'|is_authorized %}
            <div style="padding:0.5rem 1.25rem;">
              {{ (_('type') + ' ' + _('hierarchy'))|button(url_for('hierarchy_insert', category=category))|safe }}
            </div>
          {% endif %}
          {% for type_, tree in types[category].items() %}
            <div class="accordion-item">
              <div class="accordionheader" id="heading-{{ type_.id }}">
                <button
                    style="padding-top:5px; padding-bottom: 5px"
                    class="accordion-button {{ 'collapsed' if (types[category].items()|length != 1) }}"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapse-{{ type_.id }}"
                    aria-expanded="{{ types[category].items()|length == 1 }}"
                    aria-controls="collapse-{{ type_.id }}">
                  {{ type_.name }}
                </button>
              </div>
              <div id="collapse-{{ type_.id }}"
                   class="accordion-collapse collapse {{ 'show' if (types[category].items()|length == 1) }}"
                   aria-labelledby="headingOne"
                   data-bs-parent="#TypeAccordion-{{ category }}">
                <div class="accordion-body">
                  <div class="row">
                    <div class="col-12 col-sm-6 contentbox">
                      <div class="row g-1">
                        <div class="col"><input
                            class="tree-filter {{ config.CSS.string_field }}"
                            id="{{ type_.name|sanitize }}-tree-search"
                            placeholder="{{ _('type to search')|uc_first }}"
                            name="name_search"
                            type="text"></div>
                        {% if 'editor'|is_authorized and type_.category != 'system' %}
                          <div class="col-auto">
                            {% if category == 'place' %}
                              {{ _('place')|button(url_for('insert', class_='administrative_unit', origin_id=type_.id))|safe }}
                            {% else %}
                              {{ _('type')|button(url_for('insert', class_='type', origin_id=type_.id))|safe }}
                            {% endif %}
                          </div>
                        {% endif %}
                        {% if category in ['custom', 'value'] and 'manager'|is_authorized %}
                          <div class="col-auto">{{ _('edit')|button(url_for('hierarchy_update', id_=type_.id))|safe }}</div>
                          {% if not type_.system %}
                            <div class="col-auto">
                              {% if type_.count > 0 or type_.subs %}
                                {{ _('delete')|button(url_for('hierarchy_delete', id_=type_.id))|safe }}
                              {% else %}
                                {{ _('delete')|button(
                              url_for('hierarchy_delete', id_=type_.id),
                              onclick="return confirm('" + _('delete')|uc_first + " " + type_.name.replace("'", '').replace('"', '') + "?');")|safe }}
                              {% endif %}
                            </div>
                          {% endif %}
                        {% endif %}
                      </div>
                      {{ tree|safe }}
                    </div>
                    <div class="col-12 col-sm-6 contentbox">
                      {% if category != 'value' %}
                        <p>
                          <strong>{{ _('selection')|uc_first }}</strong>:
                          {{ _('multiple') if type_.multiple else _('single') }}
                        </p>
                        {% if category in ['custom', 'place', 'standard'] %}
                          <p>
                            <strong>{{ _('required')|uc_first }}</strong>:
                            {{ _('true') if type_.required else _('false') }}
                            {% if 'manager'|is_authorized %}
                              {% if type_.required %}
                                (<a href="{{ url_for('required_remove', id_=type_.id) }}">{{ _('remove required') }}</a>)
                              {% else %}
                                (<a href="{{ url_for('required_risk', id_=type_.id) }}">{{ _('make required') }}</a>)
                              {% endif %}
                            {% endif %}
                          </p>
                        {% endif %}
                      {% endif %}
                      {% if type_.classes %}
                        <p>
                          <strong>{{ _('classes')|uc_first }}</strong>:
                          {% for class_ in type_.classes %}
                            {{ g.classes[class_].label|uc_first }}{{ "," if not loop.last }}
                          {% endfor %}
                        </p>
                        {% if type_.multiple and type_.subs %}
                          <p>
                            {{ _('multiple linked entities')|uc_first }}:
                            <a href="{{ url_for('show_multiple_linked_entities', id_=type_.id) }}">{{ _('show') }}</a>
                          </p>
                        {% endif %}
                        {% if type_.subs and type_.name not in config.PROPERTY_TYPES %}
                          <p>
                            {{ _('untyped entities')|uc_first }}:
                            <a href="{{ url_for('show_untyped_entities', id_=type_.id) }}">{{ _('show') }}</a>
                          </p>
                        {% endif %}
                      {% elif category != 'system' and type_.name not in config.PROPERTY_TYPES %}
                        <p class="error">{{ _("this type has no classes and won't show in forms")|uc_first }}.</p>
                      {% endif %}
                      {% if not type_.subs %}
                        <p class="error">{{ _("this type has no subs and won't show in forms")|uc_first }}.</p>
                      {% endif %}
                      {% if type_.reference_systems %}
                        <p>{{ type_.reference_systems|ext_references|safe }}</p>
                      {% endif %}
                      {% if type_.description %}
                        <div class="description">
                          <strong>{{ _('description')|uc_first }}</strong>
                          <p>{{ type_.description }}</p>
                        </div>
                      {% endif %}
                      {% if type_.chart_data %}
                        <div class="col-lg-6">
                          <div class="chart-wrapper">
                            <canvas id="type-chart{{ type_.id }}"></canvas>
                          </div>
                        </div>
                        <script>
                          const ctx{{ type_.id }} = document.getElementById('type-chart{{ type_.id }}');
                          Chart.register(autocolors);
                          new Chart(ctx{{ type_.id }}, {
                            type : 'bar',
                            data: {{ type_.chart_data|safe }},
                            options: {
                              animation: {duration: 0},
                              plugins: {
                                autocolors: {mode: 'data', offset: 3},
                                legend: {display: false}
                              }
                            },
                          });
                        </script>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
              <div style="clear:both;"></div>
              {{ tree|safe }}
            </div>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>
{% endblock %}

{% block script %}
  <script>
      $(document).ready(function () {
          if (location.hash) {
              let url = location.href.replace(/\/$/, "");
              const hash = url.split("#");
              if (hash[1] == 'menu-tab-standard') $('#menu-tab-standard').tab('show');
          } else {
              $('#menu-tab-standard').tab('show');
          }
      });
  </script>
{% endblock %}