<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">
    <i aria-hidden="true" class="bi bi-folder"></i> {{ ad_categ_trans_1 }} {{ ad_categ_trans_2 }}:
    <em>{{ categoryName }}</em>
  </h1>
</div>
<div class="row">
  <div class="col-lg-12">
    <form action="?action=updatecategory" method="post" accept-charset="utf-8">
      <input type="hidden" name="id" value="{{ categoryId }}">
      <input type="hidden" name="parent_id" value="{{ category.parent_id }}">
      <input type="hidden" name="group_id" value="{{ category.group_id }}">
      <input type="hidden" name="showcat" value="{{ showcat }}">
      <input type="hidden" name="active" value="{{ category.active }}">
      {% if permLevel != basic %}
        <input type="hidden" name="restricted_groups[]" value="{{ groupPermission }}">
      {% else %}
        <input type="hidden" name="restricted_groups[]" value="-1">
      {% endif %}
      <input type="hidden" name="restricted_users" value="{{ userPermission }}">
      <input type="hidden" name="csrf" id="csrf" value="{{ csrf }}">

      <div class="row mb-2">
        <label class="col-lg-2 col-form-label" for="name">{{ ad_categ_title }}:</label>
        <div class="col-lg-4">
          <input type="text" name="name" class="form-control" id="name">
        </div>
      </div>

      <div class="row mb-2">
        <label class="col-lg-2 col-form-label" for="catlang">{{ ad_categ_lang }}:</label>
        <div class="col-lg-4">
          <select name="catlang" id="catlang" class="form-select">
            {{ langToTranslate|raw }}
          </select>
        </div>
      </div>

      <div class="row mb-2">
        <label class="col-lg-2 col-form-label">{{ ad_categ_desc }}:</label>
        <div class="col-lg-4">
          <textarea name="description" rows="3" class="form-control"></textarea>
        </div>
      </div>

      <div class="row mb-2">
        <label class="col-lg-2 col-form-label">{{ ad_categ_owner }}:</label>
        <div class="col-lg-4">
          <select name="user_id" class="form-control">
            {{ userOptions|raw }}
          </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="" 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">
        <label class="col-lg-2 col-form-label">{{ ad_categ_transalready }}</label>
        <div class="col-lg-4">
          <ul class="list-unstyled">
            {% for language, description in langTranslated %}
              <input type="text" readonly class="form-control-plaintext" id="staticEmail"
                     value="{{ language }}: {{ description }}">
            {% endfor %}
          </ul>
        </div>
      </div>

      <div class="row">
        <div class="offset-lg-2 col-lg-4">
          <button class="btn btn-primary" type="submit" name="submit">
            {{ ad_categ_translatecateg }}
          </button>
        </div>
      </div>

    </form>
  </div>
</div>
