<div class="form-group">
  <!-- Title Input -->
  <label for="titleInput">Title:</label>
  <input 
    type="text" 
    class="form-control" 
    name="title" 
    id="titleInput" 
    placeholder="{{ selectedMenu.title }}" 
    required
  >
  <p class="help-block">
    Required: The navbar title for the menu.
  </p>
</div>

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

{% if False %}
<!-- Parent Menu Select (Currently Disabled) -->
<div class="form-group">
  <label for="menuParentSelect">Parent:</label>
  <select class="form-control" name="parent_select" id="menuParentSelect">
    <option value="none">None</option>
    {% for menu_item in menu_items %}
      {% if not menu_item.parent and selectedMenu.path != menu_item.path %}
        <option value="{{ menu_item.path }}">{{ menu_item.title }}</option>
      {% endif %}
    {% endfor %}
  </select>
  <p class="help-block">
    Optional: Select the parent menu here. If 'None' is selected, this will be a top-level menu. Example: welcome.
  </p>
</div>
{% endif %}

<div class="form-group">
  <!-- Groups Select -->
  <label for="menuGroupSelect">Groups:</label>
  <select multiple class="form-control" name="group_select" id="menuGroupSelect">
    <option value="none" {% if selectedMenu.groups == "" %}selected{% endif %}>None</option>
    {% for group_item in all_groups %}
      <option 
        value="{{ group_item.name }}" 
        {% if group_item.name in selectedMenu.groups %} selected{% endif %}
      >
        {{ group_item.name }}
      </option>
    {% endfor %}
  </select>
  <p class="help-block">
    Optional: Select the groups who are able to access this menu. You can select multiple groups.
  </p>
</div>

<div class="form-group">
  <!-- States Select -->
  <label for="menuStateSelect">States:</label>
  <select multiple class="form-control" name="state_select" id="menuStateSelect">
    <option value="none" {% if selectedMenu.states == "" %}selected{% endif %}>None</option>
    {% for state_item in all_states %}
      <option 
        value="{{ state_item.name }}" 
        {% if state_item.name in selectedMenu.states %} selected{% endif %}
      >
        {{ state_item.name }}
      </option>
    {% endfor %}
  </select>
  <p class="help-block">
    Optional: Select the states who are able to access this menu. You can select multiple states.
  </p>
</div>

<div class="row" style="margin-top: 2rem;">
  <!-- Cancel Button -->
  <div class="col d-grid">
    <button type="submit" name="confirm_edit" value="0" class="btn btn-primary shadow">
      <i class="fas fa-times-circle"></i> Cancel
    </button>
  </div>

  <!-- Save Button -->
  <div class="col d-grid">
    <button type="submit" name="confirm_edit" value="1" class="btn btn-success shadow">
      <i class="fas fa-save"></i> Save
    </button>
  </div>
</div>
