{% extends 'simplewiki/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block details %}
{% if user_action == 'none' %}
  <div class="container-fluid" style="margin-bottom: 1rem;">
    <div class="row">
      <form method="GET" action="{% url 'simplewiki:editor_sections' %}">
        <button type="submit" name="create" value="1" class="btn btn-success btn-sm">
          <i class="fas fa-plus-square"></i>
          Create new section
        </button>
      </form>
    </div>
  </div>    
{% endif %}

    <div class="card card-primary">
      <div class="card-header">
          <div class="text-center">
            {% translate "Section Administration" %}  
          </div>
      </div>

      <div class="card-body">
      {% if user_action == 'none' %}
      {% include 'simplewiki/editor/partials/sections/_list_sections.html' %}
      {% elif user_action == 'create' %}
      {% include 'simplewiki/editor/partials/sections/_create_section.html' %}
      {% elif user_action == 'edit' %}
      {% include 'simplewiki/editor/partials/sections/_edit_section.html' %}
      {% elif user_action == 'delete' %}
      {% include 'simplewiki/editor/partials/sections/_delete_section.html' %}
      {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{% if user_action == 'edit' %}
  <script>
    document.getElementById("indexInput").value = '{{ selectedSection.index|escapejs }}';
    document.getElementById("iconInput").value = '{{ selectedSection.icon|escapejs }}';
    document.getElementById("titleInput").value = '{{ selectedSection.title|escapejs }}';
    document.getElementById("menuPathInput").value = '{{ selectedSection.menu.path|escapejs }}';
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuPathSelect = document.getElementById('menuPathSelect');
        const selectedPath = "{{ selectedSection.menu.path }}";

        for (let i = 0; i < menuPathSelect.options.length; i++) {
            if (menuPathSelect.options[i].value == selectedPath) {
                menuPathSelect.options[i].selected = true;
                break;
            }
        }
    });
</script>
{% endif %}
{% endblock %}

{% block extra_script %}
{% endblock %}
