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

{% block details %}
{% if user_action == 'none' %}
  <div class="container-fluid" style="margin-bottom: 1rem;">
    <span class="pull-right">
      <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>
    </span>
  </div>    
{% endif %}

    <div class="panel panel-primary">
      <div class="panel-heading">
        <div class="panel-title">
          <div class="text-center">
            {% translate "Section Administration" %}  
          </div>
        </div>
      </div>

      <div class="panel-body">
      {% if user_action == 'none' %}
        <table class="table table-striped">
            <thead>
              <tr>
                <th width="25%">Index</th>
                <th width="25%">Section Title</th>
                <th width="25%">Menu</th>
                <th width="25%">Action</th>
              </tr>
            </thead>
            <tbody>
                {% for section_item in section_items %}
                <tr>
                    <td>{{ section_item.index }}</td>
                    <td>
                        <i class="{{ section_item.icon }}"></i>
                        {{ section_item.title }}
                    </td>
                    <td>
                      {% if section_item.menu %}
                      <a href="{% url 'simplewiki:dynamic_menu' menu_path=section_item.menu.path %}">
                        {{ section_item.menu.title }}
                      </a>
                      {% else %}
                      None
                      {% endif %}
                    </td>
                    <td class="text-center">
                      <form method="GET" action="{% url 'simplewiki:editor_sections' %}">
                        <div class="btn-group-vertical btn-block">
                          <button type="submit" name="edit" value="{{ section_item.title }}" class="btn btn-primary btn-sm btn-block">
                            <i class="fas fa-edit"></i>
                            Edit Section
                          </button>
                          <button type="submit" name="delete" value="{{ section_item.title }}" class="btn btn-danger btn-sm btn-block">
                            <i class="fas fa-trash-alt"></i>
                            Delete Section
                          </button>
                        </div>
                        
                      </form>
                    </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
      {% elif user_action == 'create' %}
      <div class="text-center h4">
        Create new section <i class="fas fa-thumbs-up"></i>
        <br />
        <br />
        <i class="{{ selectedMenu.icon }}"></i> {{ selectedMenu.title }}
      </div>
      <hr>
      <form method="post">
        {% csrf_token %}
        <div class="form-group">
          <label for="exampleInputEmail1">Title:</label>
          <input type="text" class="form-control" name="title" placeholder="">
          <p class="help-block">Required: This title will be displayed above the content.</p>
        </div>
        <div class="form-group">
          <label for="menuPathSelect">Menu:</label>
          <select class="form-control" name="menu_path" id="menuPathSelect">
            {% for menu_item in menu_items %}
              <option value="{{ menu_item.path }}">{{ menu_item.title }}</option>
            {% endfor %}
          </select>
          <p class="help-block">Required: Menu under which this section should be displayed.</p>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Index:</label>
          <input type="text" class="form-control" name="index" placeholder="">
          <p class="help-block">Optional: The entire wiki page is sorted by this index. The lower the value, the further to the top is the section. Default will be 0.</p>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Icon:</label>
          <input type="text" class="form-control" name="icon" placeholder="">
          <p class="help-block">Optional: Go to <a href="https://fontawesome.com/v5/search?o=r&m=free" target="_blank">https://fontawesome.com/v5/search?o=r&m=free</a> to find matching icons. We only support free icons. Format example: fas fa-hand-spock</p>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Content:</label>
          <textarea class="form-control" name="content" id="contentInput" rows="10"></textarea>
          <p class="help-block">Optional: This will be displayed as your main content of the section. You can use markdown. See <a href="https://commonmark.org/help/">https://commonmark.org/help/</a> for references.</p>
        </div>
        <button type="submit" name="confirm_create" value="0" class="btn btn-default">Cancel</button>
        <div class="pull-right">
          <button type="submit" name="confirm_create" value="1" class="btn btn-success">Save</button>
        </div>
      </form>
      {% elif user_action == 'edit' %}
      <div class="text-center h4">
        Edit section
        <br />
        <br />
        <i class="{{ selectedSection.icon }}"></i> {{ selectedSection.title }}
      </div>
      <hr>
      <form method="post">
        {% csrf_token %}
        <div class="form-group">
          <label for="exampleInputEmail1">Title:</label>
          <input type="text" class="form-control" name="title" id="titleInput" placeholder="{{ selectedSection.title }}">
          <p class="help-block">Required: This title will be displayed above the content.</p>
        </div>
        <div class="form-group">
          <label for="menuPathSelect">Menu:</label>
          <select class="form-control" name="menu_path" id="menuPathSelect">
              <option value="">None</option>
              {% for menu_item in menu_items %}
              <option value="{{ menu_item.path }}">{{ menu_item.title }}</option>
              {% endfor %}
          </select>
          <p class="help-block">Required: Menu under which this section should be displayed.</p>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Index:</label>
          <input type="text" class="form-control" name="index" id="indexInput" placeholder="{{ selectedSection.index }}">
          <p class="help-block">Optional: The entire wiki page is sorted by this index. The lower the value, the further to the top is the section.</p>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Icon:</label>
          <input type="text" class="form-control" name="icon" id="iconInput" placeholder="{{ selectedSection.icon }}">
          <p class="help-block">Optional: Go to <a href="https://fontawesome.com/v5/search?o=r&m=free" target="_blank">https://fontawesome.com/v5/search?o=r&m=free</a> to find matching icons. We only support free icons. Format example: fas fa-hand-spock</p>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Content:</label>
          <textarea class="form-control" name="content" id="contentInput" rows="10">{{ selectedSection.content|safe }}</textarea>
          <p class="help-block">Optional: This will be displayed as your main content of the section. You can use markdown. Check our <a href="{% url 'simplewiki:editor_markdown_guide' %}" target="_blank">guide</a> for references.</p>
        </div>
        <button type="submit" name="confirm_edit" value="0" class="btn btn-default">Cancel</button>
        <div class="pull-right">
          <button type="submit" name="confirm_edit" value="1" class="btn btn-success">Save</button>
        </div>
      </form>
      {% elif user_action == 'delete' %}
        <div class="text-center h4">
          Are you sure you want to delete the following section?
          <br />
          <br />
          <i class="{{ selectedMenu.icon }}"></i> {{ selectedSection.title }}
        </div>
        <form method="post">
          {% csrf_token %}
          <button type="submit" name="confirm_delete" value="0" class="btn btn-default">Cancel</button>
          <div class="pull-right">
            <button type="submit" name="confirm_delete" value="1" class="btn btn-danger">Delete</button>
          </div>
        </form>
      {% endif %}
    </div>
    <div class="panel-footer">
      Check our wiki on GitHub if you need help.
    </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 %}
