{% extends '@admin/index.twig' %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3 border-bottom">
  <h1 class="h2">
    <i aria-hidden="true" class="bi bi-folder"></i> {{ 'msgNewCategory' | translate }}
  </h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <a class="btn btn-info" href="./category">
        <i aria-hidden="true" class="bi bi-list"></i> {{ 'msgCategoryMatrix' | translate }}
      </a>
    </div>
  </div>
</div>

<div class="row mb-2">
  <div class="col-lg-12">
    <form enctype="multipart/form-data" action="./category/create" method="post">
      <input type="hidden" id="lang" name="lang" value="{{ faqLangCode }}">
      <input type="hidden" name="parent_id" value="{{ parentId }}">
      {{ csrfTokenInput|raw }}
      {% if parentId > 0 %}
        <input type="hidden" name="restricted_users" value="{{ userAllowed }}">
        {% for group in groupsAllowed %}
          <input type="hidden" name="restricted_groups[]" value="{{ group }}">
        {% endfor %}
        <div class="row mb-2"><label class="col-lg-2 col-form-label">{{ msgMainCategory }}:</label>
          <div class="col-lg-4">
            <input type="text" readonly class="form-control-plaintext" id="staticEmail"
                   value="{{ categoryName }} ({{ categoryNameLangCode }})">
          </div>
        </div>
      {% endif %}
      <div class="row mb-2">
        <label class="col-lg-2 col-form-label" for="name">
          {{ 'categoryNameLabel' | translate }}
        </label>
        <div class="col-lg-4">
          <input type="text" id="name" name="name" class="form-control" required>
        </div>
      </div>

      <div class="row mb-2">
        <label class="col-lg-2 col-form-label" for="description">
          {{ 'categoryDescriptionLabel' | translate }}
        </label>
        <div class="col-lg-4">
          <textarea id="description" name="description" rows="3" class="form-control"></textarea>
        </div>
      </div>

      <div class="row mb-2">
        <div class="offset-lg-2 col-lg-4">
          <div class="form-check">
            <input type="checkbox" name="active" id="active" value="1" class="form-check-input" checked>
            <label class="form-check-label" for="active">
              {{ 'msgActive' | translate }}
            </label>
          </div>
        </div>
      </div>

      <div class="row mb-2">
        <div class="offset-lg-2 col-lg-4">
          <div class="form-check">
            <input type="checkbox" name="show_home" id="show_home" value="1" class="form-check-input">
            <label class="form-check-label" for="show_home">
              {{ 'categoryShowHomeLabel' | translate }}
            </label>
          </div>
        </div>
      </div>

      <div class="row mb-2">
        <label class="col-lg-2 col-form-label" for="pmf-category-image-upload">
          {{ categoryShowHomeLabel }}:
        </label>
        <div class="col-lg-4">
          <input class="form-control" type="file" name="image" id="pmf-category-image-upload">
        </div>
      </div>

      <div class="row mb-2">
        <label class="col-lg-2 col-form-label" for="user_id">
          {{ 'categoryOwnerLabel' | translate }}
        </label>
        <div class="col-lg-4">
          <select name="user_id" id="user_id" class="form-select">
            {% for user in userSelection %}
              <option value="{{ user.id }}"{% if user.selected %} selected{% endif %}>
                {{ user.displayName|e }} ({{ user.login|e }})
              </option>
            {% endfor %}
          </select>
        </div>
      </div>
      {% if permLevel != 'basic' %}
        <div class="row mb-2">
          <label class="col-lg-2 col-form-label" for="group_id">
            {{ 'categoryModeratorLabel' | translate }}
          </label>
          <div class="col-lg-4">
            <select name="group_id" id="group_id" class="form-select">
              <option value="0"> - </option>
              {{ groupsOptions|raw }}
            </select>
          </div>
        </div>
      {% else %}
        <input type="hidden" name="group_id" value="-1">
      {% endif %}
      {% if parentId == 0 %}
        {% if permLevel != 'basic' %}
          <div class="row mb-2">
            <label class="col-lg-2 col-form-label" for="restricted_groups">
              {{ 'msgGroupPermissions' | translate }}
            </label>
            <div class="col-lg-4">
              <div class="form-check">
                <input type="radio" name="grouppermission" id="grouppermission_all" value="all"
                       class="form-check-input" checked>
                <label class="form-check-label" for="grouppermission_all">
                  {{ 'msgAccessAllGroups' | translate }}
                </label>
              </div>
              <div class="form-check">
                <input type="radio" name="grouppermission" id="grouppermission" value="restricted"
                       class="form-check-input">
                <label class="form-check-label" for="grouppermission">
                  {{ ad_entry_restricted_groups }}
                </label>
              </div>
              <select name="restricted_groups[]" id="restricted_groups" size="3" class="form-select"
                      multiple>
                {{ restricted_groups|raw }}
              </select>
            </div>
          </div>
        {% else %}
          <input type="hidden" name="grouppermission" value="all">
        {% endif %}
        <div class="row mb-2">
          <label class="col-lg-2 col-form-label" for="restricted_users">
            {{ ad_entry_userpermission }}
          </label>
          <div class="col-lg-4">
            <div class="form-check">
              <input type="radio" name="userpermission" id="userpermission_all" value="all"
                     class="form-check-input" checked>
              <label class="form-check-label" for="userpermission_all">
                {{ 'msgAccessAllUsers' | translate }}
              </label>
            </div>
            <div class="form-check">
              <input type="radio" name="userpermission" id="userpermission" value="restricted" class="form-check-input">
              <label class="form-check-label" for="userpermission">
                {{ ad_entry_restricted_users }}
              </label>
            </div>
            <select name="restricted_users" id="restricted_users" class="form-select">
              {% for user in userSelection %}
                <option value="{{ user.id }}"{% if user.selected %} selected{% endif %}>
                  {{ user.displayName|e }} ({{ user.login|e }})
                </option>
              {% endfor %}
            </select>
          </div>
        </div>
      {% endif %}

      <!-- SERP Title -->
      <div class="row mb-2">
        <label class="col-lg-2 col-form-label" for="serpTitle">{{ 'msgSerpTitle' | translate }}</label>
        <div class="col-lg-4">
          <input type="text" name="serpTitle" id="serpTitle" value="" class="form-control">
        </div>
      </div>

      <!-- SERP Description -->
      <div class="row mb-2">
        <label class="col-lg-2 col-form-label" for="serpDescription">
          {{ 'msgSerpDescription' | translate }}
        </label>
        <div class="col-lg-4">
                <textarea type="text" name="serpDescription" id="serpDescription" rows="5" class="form-control"
                ></textarea>
        </div>
      </div>

      <div class="row mb-2">
        <div class="offset-lg-2 col-lg-4 text-end">
          <a class="btn btn-secondary" href="./category">
            {{ buttonCancel }}
          </a>
          <button class="btn btn-primary" type="submit" name="submit">
            {{ ad_categ_add }}
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock %}