<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" onsubmit="prepareContentForSubmit()">
  {% csrf_token %}

  <!-- Title Input -->
  <div class="form-group">
    <label for="titleInput">Title:</label>
    <input type="text" class="form-control" name="title" id="titleInput" placeholder="" required>
    <p class="help-block">Required: This title will be displayed above the content.</p>
  </div>

  <!-- Menu Path Selection -->
  <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>

  <!-- Index Input -->
  <div class="form-group">
    <label for="indexInput">Index:</label>
    <input type="number" class="form-control" name="index" id="indexInput" 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>

  <!-- Icon Input -->
  <div class="form-group">
    <label for="iconInput">Icon:</label>
    <input type="text" class="form-control" name="icon" id="iconInput" placeholder="">
    <p class="help-block">
      Optional: Go to 
      <a href="https://fontawesome.com/v5/search?o=r&m=free" target="_blank">
        Font Awesome
      </a> to find matching icons. We only support free icons. Format example: fas fa-hand-spock.
    </p>
  </div>

  <!-- Content Section with WYSIWYG -->
  <div class="form-group">
    <label>Content:</label>
    {% include 'simplewiki/editor/partials/wysiwyg/_toolbar.html' %}
    <div class="form-control" 
         id="contentInput" 
         name="content" 
         contenteditable="true" 
         spellcheck="false"
         style="height:500px; max-height:none; margin-bottom:1rem; overflow:auto; resize:vertical;">
      {{ selectedSection.content|safe }}
    </div>
    <p class="help-block">Optional: This will be displayed as your main content of the section.</p>
  </div>

  <!-- Hidden Input for Content -->
  <input type="hidden" name="content" id="hiddenContentInput">

  <!-- Action Buttons -->
  <div class="row">
    <div class="col d-grid">
      <button type="submit" name="confirm_create" value="0" class="btn btn-primary shadow">
        <i class="fas fa-times-circle"></i> Cancel
      </button>
    </div>
    <div class="col d-grid">
      <button type="submit" name="confirm_create" value="1" class="btn btn-success shadow">
        <i class="fas fa-plus-square"></i> Create
      </button>
    </div>
  </div>
</form>
