{% 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> {{ header }}
    </h1>
  </div>

  <div class="row mb-2">
    <div class="col-12">
      <form enctype="multipart/form-data" action="./category/update" method="post">
        <input type="hidden" name="id" value="{{ categoryId }}">
        <input type="hidden" name="catlang" id="catlang" value="{{ categoryLanguage }}">
        <input type="hidden" name="parent_id" value="{{ parentId }}">
        {{ csrfInputToken | raw }}
        <input type="hidden" name="existing_image" value="{{ categoryImage }}" id="pmf-category-existing-image">

        <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" value="{{ categoryName | raw }}" class="form-control">
          </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"
            >{{ categoryDescription | raw }}</textarea>
          </div>
        </div>

        <div class="row mb-2">
          <div class="offset-lg-2 col-lg-4">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="active" id='active' value="1" {{ categoryActive }}>
              <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 class="form-check-input" type="checkbox" name="show_home" id='show_home' value="1"
                {{ categoryShowHome }}>
              <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">
            {{ 'categoryImageLabel' | translate }}
          </label>
          <div class="col-lg-4">
            <div class="input-group">
              <input class="form-control" type="file" name="image" id="pmf-category-image-upload"
                     value="{{ categoryImage }}">
              <span class="input-group-text" id="pmf-category-image-label">{{ categoryImage }}</span>
            </div>
            <div class="input-group mt-2">
              <button type="button" class="btn btn-info" id="button-reset-category-image">
                {{ categoryImageReset }}
              </button>
            </div>
          </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 id="user_id" name="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 isMediumPermission %}
          <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>
                {{ allGroupsOptions | raw }}
              </select>
            </div>
          </div>

          <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" {{ allGroups }}>
                <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" {{ restrictedGroups }}>
                <label class="form-check-label" for="grouppermission">
                  {{ restrictedGroupsLabel }}
                </label>
              </div>
              <select name="restricted_groups[]" id="restricted_groups" size="3" class="form-select" multiple>
                {{ restrictedGroupsOptions | raw }}
              </select>
            </div>
          </div>

        {% else %}
          <input type="hidden" name="group_id" value="-1">
          <input type="hidden" name="grouppermission" value="all">
        {% endif %}
        <div class="row mb-2">
          <label class="col-lg-2 col-form-label" for="restricted_users">
            {{ userPermissionLabel }}
          </label>
          <div class="col-lg-4">
            <div class="form-check">
              <input type="radio" name="userpermission" id="userpermission_all" value="all"
                     class="form-check-input" {{ allUsers }}>
              <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"
                {{ restrictedUsers }}>
              <label class="form-check-label" for="userpermission">
                {{ restrictedUsersLabel }}
              </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>

        <!-- 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="{{ serpTitle | raw }}" 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"
                  >{{ serpDescription | raw }}</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">
              {{ buttonUpdate }}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
{% endblock %}