{% extends 'base.html' %}

{% block body %}
{# UNVALIDATED USERS BLOCK #}
<div id='unvalidatedUsersBox'>
{% if unvalidatedUsersArr %}
  <div class='box'>
    {{ 'There are users waiting for validation of their account:'|trans|msg('warning', false) }}
    <ul>
    {% for user in unvalidatedUsersArr %}
      <li>
        {{ user.fullname }} ({{ user.email }}) <button type='button' class='btn btn-primary' data-action='validate-user' data-userid='{{ user.userid }}'>{{ 'Validate'|trans }}</button> <button type='button' class='btn btn-danger' data-action='destroy-user' data-userid='{{ user.userid }}'>{{ 'Delete'|trans }}</button>
      </li>
    {% endfor %}
    </ul>
  </div>
{% endif %}
</div>

{# ADMIN PANEL MAIN MENU #}
<ul class='tabbed-menu'>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='1'>{{ 'Team'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='2'>{{ 'User Groups'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='3'>{{ 'Users'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='4'>{{ 'Categories'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='5'>{% trans %}Status{% plural 2 %}Status{% endtrans %}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='6'>{{ 'Export'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='7'>{{ 'Tag manager'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='8'>{{ 'Batch actions'|trans }}</button></li>
</ul>

{# loading spinner #}
<div class='d-flex justify-content-center' id='loading-spinner'>
  <div class='lds-dual-ring'></div>
</div>

{% include 'create-statuslike-modal.html' with {'target': 'experiments_categories', 'title': 'Create new experiments category'|trans} %}
{% include 'create-statuslike-modal.html' with {'target': 'experiments_status', 'title': 'Create new experiments status'|trans} %}
{% include 'create-statuslike-modal.html' with {'target': 'items_status', 'title': 'Create new resources status'|trans} %}
{% include('ownership-transfer-modal.html') %}
{% include 'onboarding-email-modal.html' %}

{# set variables for binary-settings template and other inputs with a data-model #}
{% set src = App.teamArr %}
{% set model = 'teams/current' %}

{# TAB 1 TEAM CONFIG #}
<div data-tabcontent='1' hidden>
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Usage Statistics'|trans }}</h3>
  <div class='pl-3 mb-5'>
    <div class='d-flex justify-content-between'>
      <div>
      {{ 'Members'|trans }}: {{ teamStats.totusers }} &ndash;
              {% trans %}
              Experiment
              {% plural teamStats.totxp %}
              Experiments
              {% endtrans %}
              : {{ teamStats.totxp }} ({{ teamStats.totxpts }} timestamped) &ndash; {{ 'Resources'|trans }}: {{ teamStats.totdb }}</div>
      <div><a href='/api/v2/reports?format=csv&scope=team' class='btn btn-primary'>{{ 'Generate report'|trans }}</a></div>
    </div>
  </div>

  <h3 class='p-2 pl-3 section-title'>{{ 'Configure your Team'|trans }}</h3>

  <div class='pl-3 mt-2'>
    <div class='d-flex justify-content-between'>
      <label for='announcement' class='col-form-label'>{{ 'Announcement'|trans }}</label>
      <input class='form-control col-md-4' data-trigger='blur' data-model='{{ model }}' data-target='announcement' type='text' id='announcement' name='announcement' value='{{ App.teamArr.announcement }}' />
    </div>
    <p class='smallgray'>{{ "The following text will be displayed to all users on all pages while it's active."|trans }}</p>
    <hr>

    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'force_exp_tpl',
      'label': 'Force experiment template use'|trans,
      'help': 'Remove Default Template and Blank Experiment choices from Create menu, and force usage of existing Templates.'|trans} %}
  </div>
  <h3 class='p-2 pl-3 section-title'>{{ 'Default Template main text'|trans }}</h3>

  <div class='pl-3 mt-2'>
    <p>{{ 'Set the text included in the main body of an Experiment when the Default Template is selected.'|trans }}</p>
    <label for='common_template'>{{ 'HTML version'|trans }}</label>
    <div>
      {% if App.Config.configArr.debug -%}
      {# set no-unused-disable and text-content because removing or leaving text-content brings up error #}
        <!-- [html-validate-disable-block unique-landmark, element-permitted-content, no-deprecated-attr, prefer-native-element, no-unused-disable, element-permitted-content: suppress errors from tinymce] -->
      {%- endif %}
      <textarea style='height:400px' class='mceditable' name='common_template' id='common_template'>
        {{ App.teamArr.common_template|raw }}
      </textarea>
    </div>
    <div class='mt-2 text-center'>
      <button type='button' data-action='patch-team-common-template' class='btn btn-primary'>{{ 'Save'|trans }}</button>
    </div>
    <hr>

    <label for='common_template_md'>{{ 'Markdown version'|trans }}</label>
    <div>
      {% if App.Config.configArr.debug -%}
        <!-- [html-validate-disable-block text-content, no-unused-disable: suppress errors from tinymce] -->
      {%- endif %}
      <textarea style='height:400px' class='markdown-textarea form-control mt-2' name='common_template_md' id='common_template_md'>{{ App.teamArr.common_template_md|raw }}</textarea>
    </div>
    <div class='mt-2 text-center'>
      <button type='button' data-action='patch-team-common-template-md' class='btn btn-primary'>{{ 'Save'|trans }}</button>
    </div>

  </div>
  <hr>

  {# ONBOARDING EMAIL #}
  {% include 'onboarding-email.html' %}

  {# FRESH USER INFO #}
  <h3 class='p-2 pl-3 section-title'>{{ 'Newcomer banner'|trans }}</h3>
  <div class='pl-3 mt-2'>
    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'newcomer_banner_active',
      'label': 'Activate newcomer banner'|trans,
      'help': 'Display a message to users that recently joined the team.'|trans} %}

    <div class='d-flex justify-content-between'>
      <label for='newcomer_threshold' class='col-form-label'>{{ 'Number of days after registration where a user is considered a newcomer'|trans }}</label>
      <input class='form-control col-md-4' data-trigger='blur' data-model='teams/current' data-target='newcomer_threshold' type='number' value='{{ App.teamArr.newcomer_threshold|e('html_attr') }}' name='newcomer_threshold' id='newcomer_threshold' />
    </div>
    <hr>

    <label for='newcomer_banner' class='col-form-label'>{{ 'Message to display'|trans }}</label>
    <div>
      {% if App.Config.configArr.debug -%}
      {# set no-unused-disable and text-content because removing or leaving text-content brings up error #}
        <!-- [html-validate-disable-block unique-landmark, element-permitted-content, no-deprecated-attr, prefer-native-element, no-unused-disable, element-permitted-content: suppress errors from tinymce] -->
      {%- endif %}
      <textarea style='height:400px' class='mceditable' name='newcomer_banner' id='newcomer_banner'>
        {{ src.newcomer_banner|raw }}
      </textarea>
    </div>
    <div class='mt-2 text-center'>
      <button type='button' data-action='patch-newcomer_banner' class='btn btn-primary'>{{ 'Save'|trans }}</button>
    </div>

  </div>
</div>

{# TAB 2 USER GROUPS #}
<div data-tabcontent='2' hidden>
  <p>{{ 'A User Group can contain users from different teams. Its main use is to later allow giving permissions to this group.'|trans }}</p>
  <p><a target='_blank' rel='noopener' class='external-link' href='https://doc.elabftw.net/admin-guide.html#groups-tab'>{{ 'Link to documentation'|trans }}</a></p>
  <h3 class='p-2 pl-3 section-title'>{{ 'Create user group'|trans }}</h3>

  <div class='pl-3 mt-2 mb-5'>
    {# CREATE A GROUP #}
    <div class='input-group'>
      <input type='text' id='teamGroupCreate' class='form-control' placeholder='{{ 'Add a group'|trans }}' aria-label='{{ 'Add a group'|trans }}'>
      <div class='input-group-append'>
        <button class='btn btn-primary' data-action='create-teamgroup' type='button'>{{ 'Create'|trans }}</button>
      </div>
    </div>
    {# END CREATE GROUP #}
  </div>

  {# SHOW EXISTING USER GROUPS #}
  <div id='team_groups_div'>
    <h3 class='p-2 pl-3 section-title'>{{ 'Existing user groups'|trans }}</h3>
    <div class='pl-3'>
      {% if not teamGroupsArr %}
        <p class='mt-3'>{{ 'No user group created yet.'|trans }}</p>
      {% endif %}
      {% for teamGroup in teamGroupsArr %}
        <div class='box'>
          <button class='btn float-right border-0 hl-hover-gray rounded p-2 lh-normal m-0' data-action='destroy-teamgroup' data-id='{{ teamGroup.id }}' title='{{ 'Delete'|trans }}'>
            <i class='fas fa-trash-alt'></i>
          </button>
          <h5><i class='fas fa-users'></i> <span data-id='{{ teamGroup.id }}' class='malleableTeamgroupName hl-hover'>{{ teamGroup.name }}</span></h5>
          <hr>
          <div class='d-flex flex-wrap'>
            {% for user in teamGroup.users %}
            <div class='user-badge mr-2'>{{ user.fullname }} <span title='{{ 'Delete'|trans }}' class='m-1' data-action='rmuser-teamgroup' data-userid='{{ user.userid }}' data-groupid='{{ teamGroup.id }}'><i class='fas fa-xmark color-blue'></i></span></div>
            {% endfor %}
          </div>
          {# ADD USER #}
          <div class='input-group mt-3'>
            <div class='input-group-prepend'>
              <span class='input-group-text'><i class='fas fa-magnifying-glass'></i></span>
            </div>
            <input type='text' class='form-control' data-complete-target='users' placeholder='{{ 'User name'|trans }}' aria-label='{{ 'User name'|trans }}'>
            <div class='input-group-append'>
              <button class='btn btn-primary' data-action='adduser-teamgroup' data-groupid='{{ teamGroup.id }}' type='button'>{{ 'Add user'|trans }}</button>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
{# END USER GROUPS #}

{# TAB 3 USERS #}
<div data-tabcontent='3' hidden>
  {% include 'editusers.html' %}
</div>

{# TAB 4 CATEGORIES #}
<div data-tabcontent='4' hidden>
  {# EXPERIMENTS CATEGORIES #}
  {# hide this part if we're EDITING a RESOURCE category #}
  <div {{ App.Request.query.has('templateid') ? 'hidden' }}>
  <h3 id='experimentsCategoriesAnchor' class='mb-3 p-2 pl-3 section-title'>{{ 'Experiments categories'|trans }}</h3>
  <div class='pl-3 mb-5' id='experiments_categoriesDiv'>
    <div class='mb-2 d-flex justify-content-between'>
      <p class='col-form-label'>{{ 'Create and modify the categories available to experiments.'|trans }}</p>
      {# CREATE NEW BUTTON the div around the button is necessary or the button itself gets resized on small viewports #}
      <div>
        <button type='button' class='btn btn-primary' data-action='toggle-modal' data-target='createexperiments_categoriesModal'>{{ 'Create'|trans }}</button>
      </div>
    </div>
    <ul class='list-group sortable' data-axis='y' data-table='experiments_categories'>
      {% for cat in experimentsCategoriesArr %}
        <li id='expcat_{{ cat.id }}' data-statusid='expcat_{{ status.id }}' class='list-group-item'>
          <ul class='list-inline'>
            <li class='list-inline-item'>
              <span class='draggable sortableHandle'>
                <i class='fas fa-grip-vertical fa-fw'></i>
              </span>
            </li>

            <li class='list-inline-item'>
              <label for='expcatName_{{ cat.id }}'>{{ 'Name'|trans }}</label>
              <input class='form-control' required type='text' id='expcatName_{{ cat.id }}' value='{{ cat.title|e('html_attr') }}' />
            </li>

            <li class='list-inline-item col-1 align-top'>
              <label for='expcatColor_{{ cat.id }}'>{{ 'Color'|trans }}</label>
              <input class='form-control' type='color' id='expcatColor_{{ cat.id }}' value='#{{ cat.color }}' />
            </li>

            <li class='list-inline-item'>
              <input type='radio' name='expexpcatdefault' id='expcatDefault_{{ cat.id }}' {{ cat.is_default ? " checked" }} />
              <label for='expcatDefault_{{ cat.id }}'>{{ 'Default'|trans }}</label>
            </li>

            <li class='list-inline-item'>
              <button type='button' data-id='{{ cat.id }}' class='btn btn-primary' data-target='expcat' data-action='update-status'>{{ 'Save'|trans }}</button>
            </li>

            <li class='list-inline-item'>
              <button type='button' data-id='{{ cat.id }}' data-target='experiments_categories' data-action='destroy-catstat' class='btn btn-danger' >{{ 'Delete'|trans }}</button>
            </li>
          </ul>
        </li>
      {% endfor %}
    </ul>
  </div>
  </div>
  {# RESOURCES CATEGORIES #}
  <h3 id='itemsCategoriesAnchor' class='mb-3 p-2 pl-3 section-title'>{{ 'Resources categories'|trans }}</h3>
  <div class='pl-3' id='itemsCategoriesDiv'>
    <div {{ App.Request.query.has('templateid') ? 'hidden' }}>
      <div class='d-flex justify-content-between mb-2'>
        <p class='col-form-label'>{{ 'This menu allows you to define categories for your resources. A resource category is similar to an experiment template but for resources entries.'|trans }}</p>
        {# CREATE NEW BUTTON the div around the button is necessary or the button itself gets resized on small viewports #}
        <div>
          <button type='button' class='btn btn-primary' data-action='itemstypes-create'>{{ 'Create'|trans }}</button>
        </div>
      </div>
    </div>

  {% if App.Request.query.has('templateid') %}
    <a href='?tab=4' class='btn hl-hover-gray'>
      <i class='fas fa-arrow-left mr-1 fa-fw'></i>{{ 'Back to listing'|trans }}
    </a>

  {% else %}

    <ul class='list-group form-group sortable mb-2' data-axis='y' data-table='items_types'>
      {% for itemType in itemsCategoryArr %}
      <li class='list-group-item' id='itemstypes_{{ itemType.id }}'>
        <div class='d-flex'>
          <span class='sortableHandle draggable p-2 mr-2'>
            <i class='fas fa-grip-vertical'></i>
          </span>
          {# edit resource category button #}
          <a href='?tab=4&amp;templateid={{ itemType.id }}#itemsCategoriesAnchor' aria-label='{{ 'Edit'|trans }} {{ itemType.title|e('html_attr') }}' title='{{ 'Edit'|trans }}' class='p-2 mx-2 rounded hl-hover-gray'>
            <i class='fas fa-pencil-alt'></i>
          </a>
          {# resource category title and team_name #}
          <span class='p-2' style='color: #{{ itemType.color }}'>{{ itemType.title }}</span>
          <span class='user-badge ml-auto'>{{ itemType.team_name }}</span>
        </div>
      </li>
      {% endfor %}
    </ul>
    {% if itemsCategoryArr %}
      <p>{{ 'Use the handles to adjust the order in which the categories appear in the application.'|trans }}</p>
    {% endif %}
  {% endif %}

    {# Entity.entityData will be loaded with content from an item type if templateid is present is url #}
    {% if Entity.entityData %}
      <div class='float-right'>
        <button type='button' class='btn btn-danger' data-id='{{ Entity.id }}' data-action='itemstypes-destroy'>{{ 'Delete'|trans }}</button>
      </div>
      <div class='d-flex my-2 align-items-center'>
        <label class="col-form-label mr-3 edit-mode-label">{{ 'Team'|trans }}</label>
        <i aria-hidden='true' class='fas fa-fw fa-users mr-1'></i><span class='ml-2 font-weight-bold'>{{ Entity.entityData.team_name }}</span>
      </div>
      {# Name label #}
      <div class='d-flex mb-2 align-items-center'>
        <label for='itemsTypesName' class="col-form-label mr-3 edit-mode-label">{{ 'Name'|trans }}</label>
        <input type='text' data-trigger='blur' data-model='items_types/{{ Entity.id }}' data-target='title' class='form-control col-md-2 catstatSelect' id='itemsTypesName' value='{{ Entity.entityData.title|e('html_attr') }}' />
      </div>

      {% include('catstat-edit.html') %}
      {# Color input #}
      <div class='d-flex mb-2 align-items-center'>
        <label for='itemsTypesColor' class="col-form-label mr-3 edit-mode-label">{{ 'Color'|trans }}</label>
        <input class='form-control col-1 catstatSelect' data-trigger='change' data-model='items_types/{{ Entity.id }}' data-target='color' type='color' id='itemsTypesColor' value='#{{ Entity.entityData.color }}' />
      </div>

      {# PERMISSIONS #}
      <hr>
      <h5>{{ 'Permissions for the resource category'|trans }}</h5>
      {% include('edit-permissions.html') %}
      {# TARGET PERMISSIONS #}
      <h5>{{ 'Permissions for the derived resource'|trans }}</h5>
      <div class='d-flex mb-2 align-items-center'>
        {# CANREAD #}
        {% set rw = 'canread_target' %}
        {% set can = Entity.entityData.canread_target|canToHuman %}
        {% include('view-permissions.html') %}
      </div>
      <div class='d-flex'>
        <label for='canread_is_immutable' class='col-form-label mr-2'>{{ 'Lock down read permissions'|trans }}</label>
        <label class='switch ucp-align'>
          <input type='checkbox' autocomplete='off' data-trigger='change' data-model='{{ Entity.entityType.value ~ '/' ~ Entity.id }}' data-target='canread_is_immutable' {{ Entity.entityData.canread_is_immutable ? 'checked="checked"' }} id='canread_is_immutable'>
          <span class='slider'></span>
        </label>
      </div>
      <div class='d-flex mb-2 align-items-center'>
        {# CANWRITE #}
        {% set rw = 'canwrite_target' %}
        {% set can = Entity.entityData.canwrite_target|canToHuman %}
        {% include('view-permissions.html') %}
      </div>
      <div class='d-flex'>
        <label for='canwrite_is_immutable' class='col-form-label mr-2'>{{ 'Lock down write permissions'|trans }}</label>
        <label class='switch ucp-align'>
          <input type='checkbox' autocomplete='off' data-trigger='change' data-model='{{ Entity.entityType.value ~ '/' ~ Entity.id }}' data-target='canwrite_is_immutable' {{ Entity.entityData.canwrite_is_immutable ? 'checked="checked"' }} id='canwrite_is_immutable'>
          <span class='slider'></span>
        </label>
      </div>
      <hr>

      <div class='d-flex ml-4'>
        {# Display main text switch #}
        <div class='ml-auto'>
          <label class='mr-1 smallgray' for='displayMainTextSliderInput'>{{ 'Display main text'|trans }}</label>
          <label class='switch'>
            <input type='checkbox' {{ entityData.metadata|extractDisplayMainText() ? 'checked="checked"' }} id='displayMainTextSliderInput'>
            <span class='slider'></span>
          </label>
        </div>
      </div>
      <div id='entityBodyEditorDiv' data-content-type='{{ Entity.entityData.content_type }}'>
        {% if Entity.entityData.content_type == '2' %}
          <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='markdown-textarea' data-language='{{ App.getJsLang }}' name='body'>{{ Entity.entityData.body }}</textarea>
        {% else %}
          <textarea class='mceditable' id='itemsTypesBody'>{{ Entity.entityData.body }}</textarea>
        {% endif %}
        {# SWITCH EDITOR #}
        <div class='float-right'>
          <button type='button' class='btn btn-sm hl-hover-gray p-1 mt-1 rounded' data-action='switch-editor'><i class='fas fa-pencil-alt fa-fw'></i> {{ 'Switch editor'|trans }}</button>
        </div>
        <div class='text-center mt-3'>
          {# Save button only acts on body, other fields are saved on blur or change events #}
          <button type='button' class='btn btn-primary' data-id='{{ Entity.id }}' data-action='update-entity-body'>{{ 'Save'|trans }}</button>
        </div>
      </div>

      {# EXTRA FIELDS #}
      <h3 data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Extra fields'|trans }}</h3>
      <div data-save-hidden='metadataDiv' class='col-md-6 mt-4'>
        {# this div is filled in JS by Metadata.class.ts edit() #}
        <div id='metadataDiv'></div>
        <div class='mt-3 row'>
          <button type='button' data-action='toggle-modal' data-target='fieldBuilderModal' class='btn btn-secondary'>{{ 'Add field'|trans }}</button>
          <button type='button' data-action='toggle-modal' data-target='fieldLoaderModal' class='ml-3 btn hl-hover-gray'>{{ 'Load fields'|trans }}</button>
        </div>
      </div>
      <hr>
      {% set mode = 'edit-template' %}
      {% include 'steps-links-edit.html' %}
      {# METADATA editor for items types #}
      {% include 'json-editor.html' %}
    {% endif %}
  </div>
</div>

{# TAB 5 STATUS #}
<div data-tabcontent='5' hidden>
  {# EXPERIMENTS STATUS #}
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Experiments Status'|trans }}</h3>
  <div class='pl-3 mb-5' id='experiments_statusDiv'>
    <div class='mb-2 d-flex justify-content-between'>
      <p class='col-form-label'>{{ 'Create and modify the status available to experiments.'|trans }}</p>
      {# CREATE NEW BUTTON the div around the button is necessary or the button itself gets resized on small viewports #}
      <div>
        <button type='button' class='btn btn-primary' data-action='toggle-modal' data-target='createexperiments_statusModal'>{{ 'Create'|trans }}</button>
      </div>
    </div>
    <ul class='list-group sortable mb-5' data-axis='y' data-table='experiments_status'>
      {% for status in statusArr %}
        <li id='status_{{ status.id }}' data-statusid='status_{{ status.id }}' class='list-group-item'>
          <ul class='list-inline'>
            <li class='list-inline-item'>
              <span class='draggable sortableHandle'>
                <i class='fas fa-grip-vertical fa-fw'></i>
              </span>
            </li>

            <li class='list-inline-item'>
              <label for='statusName_{{ status.id }}'>{{ 'Name'|trans }}</label>
              <input class='form-control' required type='text' id='statusName_{{ status.id }}' value='{{ status.title|e('html_attr') }}' />
            </li>

            <li class='list-inline-item col-1 align-top'>
              <label for='statusColor_{{ status.id }}'>{{ 'Color'|trans }}</label>
              <input class='form-control' type='color' id='statusColor_{{ status.id }}' value='#{{ status.color }}' />
            </li>

            <li class='list-inline-item'>
              <input type='radio' name='expstatusdefault' id='statusDefault_{{ status.id }}' {{ status.is_default ? " checked" }} />
              <label for='statusDefault_{{ status.id }}'>{{ 'Default'|trans }}</label>
            </li>

            <li class='list-inline-item'>
              <button type='button' data-id='{{ status.id }}' class='btn btn-primary' data-target='experiments' data-action='update-status'>{{ 'Save'|trans }}</button>
            </li>

            <li class='list-inline-item'>
              <button type='button' data-id='{{ status.id }}' data-target='experiments_status' data-action='destroy-catstat' class='btn btn-danger' >{{ 'Delete'|trans }}</button>
            </li>
          </ul>
        </li>
      {% endfor %}
    </ul>

  {# RESOURCES STATUS #}
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Resources Status'|trans }}</h3>
  <div class='pl-3' id='items_statusDiv'>
    <div class='mb-2 d-flex justify-content-between'>
      <p class='col-form-label'>{{ 'Create and modify the status available to resources.'|trans }}</p>
      {# CREATE NEW BUTTON the div around the button is necessary or the button itself gets resized on small viewports #}
      <div>
        <button type='button' class='btn btn-primary' data-action='toggle-modal' data-target='createitems_statusModal'>{{ 'Create'|trans }}</button>
      </div>
    </div>
    <ul class='list-group sortable' data-axis='y' data-table='items_status'>
      {% for status in itemsStatusArr %}
        <li id='itemsstatus_{{ status.id }}' data-statusid='itemsstatus_{{ status.id }}' class='list-group-item'>
          <ul class='list-inline'>
            <li class='list-inline-item'>
              <span class='draggable sortableHandle'>
                <i class='fas fa-grip-vertical fa-fw'></i>
              </span>
            </li>

            <li class='list-inline-item'>
              <label for='itemsstatusName_{{ status.id }}'>{{ 'Name'|trans }}</label>
              <input class='form-control' required type='text' id='itemsstatusName_{{ status.id }}' value='{{ status.title|e('html_attr') }}' />
            </li>

            <li class='list-inline-item col-1 align-top'>
              <label for='itemsstatusColor_{{ status.id }}'>{{ 'Color'|trans }}</label>
              <input class='form-control' type='color' id='itemsstatusColor_{{ status.id }}' value='#{{ status.color }}' />
            </li>

            <li class='list-inline-item'>
              <input type='radio' name='itemsstatusdefault' id='itemsstatusDefault_{{ status.id }}' {{ status.is_default ? " checked" }} />
              <label for='itemsstatusDefault_{{ status.id }}'>{{ 'Default'|trans }}</label>
            </li>

            <li class='list-inline-item'>
              <button type='button' data-id='{{ status.id }}' class='btn btn-primary' data-target='items' data-action='update-status'>{{ 'Save'|trans }}</button>
            </li>

            <li class='list-inline-item'>
              <button type='button' data-id='{{ status.id }}' data-target='items_status' data-action='destroy-catstat' class='btn btn-danger' >{{ 'Delete'|trans }}</button>
            </li>
          </ul>
        </li>
      {% endfor %}
    </ul>
  </div>
  </div>
</div>


{# TAB 6 EXPORT #}
<div data-tabcontent='6' hidden>
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Export database items'|trans }}</h3>
  <div class='pl-3 mb-5'>
    <div class='d-flex justify-content-between'>
      <label for='categoryExport' class='col-form-label'>{{ 'Select what to export'|trans }}</label>
      <select class='form-control col-md-3' id='categoryExport' autocomplete='off'>
        {% for itemsType in itemsCategoryArr %}
          <option value='{{ itemsType.id }}'>{{ itemsType.title }}</option>
        {% endfor %}
      </select>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='categoryExportFormat' class='col-form-label'>{{ 'Select an export format'|trans }}</label>
      <select class='form-control col-md-3' id='categoryExportFormat' autocomplete='off'>
        <option value='eln'>{{ 'ELN Archive'|trans }}</option>
        <option value='zip'>{{ 'ZIP Archive'|trans }}</option>
        <option value='csv'>{{ 'CSV File'|trans }}</option>
        <option value='pdf'>{{ 'PDF File'|trans }}</option>
        <option value='qrpdf'>{{ 'QR codes PDF'|trans }}</option>
        <option value='json'>{{ 'JSON'|trans }}</option>
      </select>
    </div>
    <hr>

    <div class='my-2 text-center'>
      <button type='button' data-action='export-category' class='btn btn-primary'>{{ 'Export'|trans }}</button>
    </div>
  </div>

  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Export experiments of user'|trans }}</h3>
  <div class='pl-3 mb-5'>

    <div class='d-flex justify-content-between'>
      <label for='userExport' class='col-form-label'>{{ 'Select user'|trans }}</label>
      <select class='form-control col-md-3' id='userExport' autocomplete='off'>
        {% for user in allTeamUsersArr %}
          <option value='{{ user.userid }}'>{{ user.fullname }}</option>
        {% endfor %}
      </select>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='userExportFormat' class='col-form-label'>{{ 'Select an export format'|trans }}</label>
      <select class='form-control col-md-3' id='userExportFormat' autocomplete='off'>
        <option value='eln'>{{ 'ELN Archive'|trans }}</option>
        <option value='zip'>{{ 'ZIP Archive'|trans }}</option>
        <option value='csv'>{{ 'CSV File'|trans }}</option>
        <option value='pdf'>{{ 'PDF File'|trans }}</option>
        <option value='qrpdf'>{{ 'QR codes PDF'|trans }}</option>
        <option value='json'>{{ 'JSON'|trans }}</option>
      </select>
    </div>
    <hr>

    <div class='mt-2 text-center'>
      <button type='button' data-action='export-user' class='btn btn-primary'>{{ 'Export'|trans }}</button>
    </div>

  </div>

  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Export bookings'|trans }}</h3>
  <div class='pl-3'>

    <div class='d-flex justify-content-between'>
      <label for='schedulerDateFrom' class='col-form-label'>{{ 'Date from'|trans }}</label>
      <input id='schedulerDateFrom' name='schedulerDateFrom' type='date' class='form-control col-md-3' value='{{ "1 month ago"|date('Y-m-d') }}'/>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='schedulerDateTo' class='col-form-label'>{{ 'Date to'|trans }}</label>
      <input id='schedulerDateTo' name='schedulerDateTo' type='date' class='form-control col-md-3' value='{{ "now"|date('Y-m-d') }}'/>
    </div>
    <hr>

    <div class='mt-2 text-center'>
      <button type='button' data-action='export-scheduler' class='btn btn-primary'>{{ 'Export'|trans }}</button>
    </div>
  </div>
</div>

{# TAB 7 TAG MANAGER #}
<div data-tabcontent='7' hidden>
  <p>{{ 'From here you can add, edit or delete the tags for your team. Click the tag to edit it.'|trans }}</p>
  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Configuration'|trans }}</h3>
  <div class='pl-3 mb-5'>
    {% include 'binary-setting.html' with {'model': model, 'src': src,
      'slug': 'user_create_tag',
      'label': 'Allow users to create new tags'|trans,
      'help': 'An admin account will always be able to create new tags.'|trans} %}
  </div>

  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Add a tag'|trans }}</h3>
  <div class='pl-3 mb-5'>

    <div class='input-group'>
      <input type='text' id='adminAddTagInput' class='form-control' placeholder='{{ 'Add a tag'|trans }}' aria-label='{{ 'Add a tag'|trans }}'>
      <div class='input-group-append'>
        <button class='btn btn-primary' data-action='admin-add-tag' type='button'>{{ 'Save'|trans }}</button>
      </div>
    </div>
  </div>

  <h3 class='mb-3 p-2 pl-3 section-title'>{{ 'Manage tags of the team'|trans }}</h3>
  <div class='pl-3'>

    <div class='mt-2' id='tagMgrDiv'>
      {% include 'filter-input-snippet.html' with {'target': 'tagManagerTable'} %}
      <table class='table' aria-label='{{ 'Tags of the team'|trans }}' data-table-sort='true'>
        <thead>
          <tr>
            <th scope='col'>{{ 'Tag'|trans }}</th>
            <th scope='col'>{{ 'Occurence'|trans }}</th>
            <th scope='col'>{{ 'Show tagged experiments'|trans }}</th>
            <th scope='col'>{{ 'Show tagged items'|trans }}</th>
            <th scope='col'>{{ 'Delete'|trans }}</th>
          </tr>
        </thead>
        <tbody id='tagManagerTable'>
          {# for this table, sort the tags by popularity (item_count) #}
          {% for tag in tagsArr|sort((a, b) => b.item_count <=> a.item_count) %}
            {# id data attribute is repeated from the editable tag button so we can grab it to remove the row after update lead to deduplicate #}
            <tr data-id='{{ tag.id }}'>
              <th data-label='{{ 'Tag'|trans }}' scope='row' class='border-right-0'><button type='button' class='btn tag editable hl-hover lh-normal border-0' data-id='{{ tag.id }}'>{{ tag.tag }}</button></th>
              <td data-label='{{ 'Occurence'|trans }}' class='align-middle'>{{ tag.item_count }}</td>
              <td data-label='{{ 'Show tagged experiments'|trans }}'>
                <a title='{{ 'Show tagged experiments'|trans }}' aria-label='{{ 'Show tagged experiments'|trans }}' href='experiments.php?mode=show&amp;tags%5B%5D={{ tag.tag|url_encode }}' class='btn hl-hover-gray lh-normal p-1 my-n1'>
                  <i class='fas fa-external-link-square-alt'></i>
                </a>
              </td>
              <td data-label='{{ 'Show tagged items'|trans }}'>
                <a title='{{ 'Show tagged items'|trans }}' aria-label='{{ 'Show tagged items'|trans }}' href='database.php?mode=show&amp;tags%5B%5D={{ tag.tag|url_encode }}' class='btn hl-hover-gray lh-normal p-1 my-n1'>
                  <i class='fas fa-external-link-square-alt'></i>
                </a>
              </td>
              <td data-label='{{ 'Delete'|trans }}'>
                <button type='button' class='btn hl-hover-gray lh-normal p-1 my-n1' data-action='destroy-tag' data-tagid='{{ tag.id }}' title='{{ 'Delete'|trans }}' aria-label='{{ 'Delete'|trans }}'><i class='fas fa-trash-alt'></i></button>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{# TAB 8 BATCH ACTIONS #}
<div data-tabcontent='8' id='batchActions' hidden>
  <p>{{ 'From here you can perform actions on entire group of entries at once.'|trans }}</p>
  <hr>
  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Resources categories'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
  {% for itemsCategory in itemsCategoryArr %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
      <label for='batch-itemsTypes-{{ itemsCategory.id }}' class='col-form-label clickable'>{{ itemsCategory.title }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' name='items_types' value='{{ itemsCategory.id }}' autocomplete='off' data-action='update-counter-value' id='batch-itemsTypes-{{ itemsCategory.id }}'>
        <span class='slider'></span>
      </label>
    </div>
  {% endfor %}
    </div>
    <hr>

  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Resources status'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
  {% for status in itemsStatusArr %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
      <label for='batch-itemsStatus-{{ status.id }}' class='col-form-label clickable'>{{ status.title }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' name='items_status' value='{{ status.id }}' autocomplete='off' data-action='update-counter-value' id='batch-itemsStatus-{{ status.id }}'>
        <span class='slider'></span>
      </label>
    </div>
  {% endfor %}
    </div>

  <hr>
  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Resources tags'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
    {# for this tab, sort the tags in alphabetical order, case-insensitive #}
    {% for tag in tagsArr|sort((a, b) => a.tag|lower <=> b.tag|lower) %}
      <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
        <label for='batch-itemsTags-{{ tag.id }}' class='col-form-label clickable'>{{ tag.tag }}</label>
        <label class='switch ucp-align'>
          <input type='checkbox' name='items_tags' value='{{ tag.id }}' autocomplete='off' data-action='update-counter-value' id='batch-itemsTags-{{ tag.id }}'>
          <span class='slider'></span>
        </label>
      </div>
    {% endfor %}
  </div>

  <hr>
  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Experiments categories'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
  {% for experimentsCategory in experimentsCategoriesArr %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
      <label for='batch-experimentsCategories-{{ experimentsCategory.id }}' class='col-form-label clickable'>{{ experimentsCategory.title }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' name='experiments_categories' value='{{ experimentsCategory.id }}' autocomplete='off' data-action='update-counter-value' id='batch-experimentsCategories-{{ experimentsCategory.id }}'>
        <span class='slider'></span>
      </label>
    </div>
  {% endfor %}
    </div>
    <hr>

  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Experiments status'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
  {% for status in statusArr %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
      <label for='batch-experimentsStatus-{{ status.id }}' class='col-form-label clickable'>{{ status.title }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' name='experiments_status' value='{{ status.id }}' autocomplete='off' data-action='update-counter-value' id='batch-experimentsStatus-{{ status.id }}'>
        <span class='slider'></span>
      </label>
    </div>
  {% endfor %}
    </div>

  <hr>
  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Experiments tags'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
    {% for tag in tagsArr|sort((a, b) => a.tag|lower <=> b.tag|lower) %}
    <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
        <label for='batch-experimentsTags-{{ tag.id }}' class='col-form-label clickable'>{{ tag.tag }}</label>
        <label class='switch ucp-align'>
          <input type='checkbox' name='experiments_tags' value='{{ tag.id }}' autocomplete='off' data-action='update-counter-value' id='batch-experimentsTags-{{ tag.id }}'>
          <span class='slider'></span>
        </label>
      </div>
    {% endfor %}
  </div>
  <hr>

  <button type='button' class='btn p-2 hl-hover-gray lh-normal border-0 my-n2' data-action='toggle-next' data-opened-icon='fa-square-minus' data-closed-icon='fa-square-plus' title='{{ 'Toggle display'|trans }}' aria-label='{{ 'Toggle display'|trans }}'><i class='fas fa-square-plus fa-fw link-like mr-2'></i>{{ 'Owner'|trans }} (<span class='counterValue'>0</span> {{ 'selected'|trans }})</button>
  <div hidden class='mt-2'>
    {% for user in allTeamUsersArr %}
      <div class='d-flex justify-content-between p-1 rounded hl-hover-gray'>
        <label for='batch-users-{{ user.userid }}' class='col-form-label clickable'>{{ user.fullname }} ({{ user.email }})</label>
        <label class='switch ucp-align'>
          <input type='checkbox' name='users' value='{{ user.userid }}' autocomplete='off' data-action='update-counter-value' id='batch-users-{{ user.userid }}'>
          <span class='slider'></span>
        </label>
      </div>
    {% endfor %}
  </div>
  <hr>
  </section>

  <div class='row mx-0 mt-3'><p>{{ 'With selected:'|trans }}</p></div>
  {# First line #}
  <div class='row mx-0 mb-3'>
    {# Action buttons #}
    <button data-action='run-action-selected' data-what='forcelock' type='button' class='btn btn-primary mr-1 mb-2'>{{ 'Lock'|trans }}</button>
    <button data-action='run-action-selected' data-what='forceunlock' type='button' class='btn btn-primary mr-1 mb-2'>{{ 'Unlock'|trans }}</button>
    <button data-action='toggle-modal' type='button' class='btn btn-primary mr-1 mb-2' data-target='ownerModal'>{{ 'Transfer ownership'|trans }}</button>
    <button data-action='run-action-selected' data-what='archive' type='button' class='btn btn-secondary mr-1 mb-2'>{{ 'Archive'|trans }}</button>
    <button data-action='run-action-selected' data-what='destroy' type='button' class='btn btn-danger mr-1 mb-2'>{{ 'Delete'|trans }}</button>
  </div>

  <h4>{{ 'Set permissions'|trans }}</h4>
  <div class='row'>
    <div class='col-md-6 mb-3'>
      <label for='masscan_select_base'>{{ 'Base'|trans }}</label>
      <p class='smallgray'>{{ 'This setting sets a baseline upon which you can add more permissions by selecting teams, user groups or users below.'|trans }}</p>
      <select id='masscan_select_base' class='form-control'>
        {% for key, value in visibilityArr %}
          <option value='{{ key }}'>{{ value|trans }}</option>
        {% endfor %}
      </select>
      {# TEAMS #}
      <label for='masscan_select_teams' class='mt-2'>+ {{ 'Teams'|trans }}</label> <p class='smallgray d-inline'>{{ '(hold %sctrl%s key to select multiple entries, %sctrl%s + click to deselect a selected entry)'|trans|format('<kbd>', '</kbd>', '<kbd>', '</kbd>')|raw }}</p>
      <p class='smallgray'>{{ 'Selecting a team here will give access to all members of this team.'|trans }}</p>
      <select id='masscan_select_teams' multiple class='form-control' autocomplete='off'>
        {% for team in teamsArr|filter(t => t.visible == '1') %}
          <option value='team:{{ team.id }}'>{{ 'Team'|trans }} - {{ team.name }}</option>
        {% endfor %}
      </select>
      {# USERGROUPS #}
      <label for='masscan_select_teamgroups' class='mt-2'>+ {{ 'User Groups'|trans }}</label> <p class='smallgray d-inline'>{{ '(hold %sctrl%s key to select multiple entries, %sctrl%s + click to deselect a selected entry)'|trans|format('<kbd>', '</kbd>', '<kbd>', '</kbd>')|raw }}</p>
      <p class='smallgray'>{{ 'Selecting a teamgroup here will give access to all users part of this teamgroup.'|trans }}</p>
      <select {{ allTeamgroupsArr|length == 0 ? 'disabled' }} id='masscan_select_teamgroups' multiple class='form-control' autocomplete='off'>
        {% for tg in allTeamgroupsArr %}
          <option value='teamgroup:{{ tg.id }}'>{{ 'Teamgroup'|trans }} - {{ tg.name }}</option>
        {% endfor %}
      </select>
      {# USERS #}
      <label for='masscan_select_users' class='mt-2'>+ {{ 'Users'|trans }}</label> <p class='smallgray d-inline'>{{ 'Allow individual users to access this entry.'|trans }}</p>
      <ul class='list-group mb-1' id='masscan_list_users'></ul>
      {# add user to permissions input #}
      <div class='input-group'>
        <input id='masscan_select_users' type='text' data-identifier='masscan' data-complete-target='users' class='form-control' placeholder='{{ 'Add user'|trans }}' autocomplete='off'>
        <div class='input-group-append'>
          <button class='btn btn-primary' type='button' data-rw='canread' data-identifier='masscan' data-action='add-user-to-permissions'>{{ 'Add'|trans }}</button>
        </div>
      </div>
      <div id='autocompleteAnchorDiv_masscan'></div>

      <hr>
      {# SAVE AND RESET BUTTONS #}
      <div class='mt-3'>
        <button data-action='run-action-selected' type='button' data-what='setcanread' class='btn btn-primary mr-1 mb-2'>{{ 'Set read permissions'|trans }}</button>
        <button data-action='run-action-selected' type='button' data-what='setcanwrite' class='btn btn-primary mr-1 mb-2'>{{ 'Set write permissions'|trans }}</button>
      </div>
    </div>
  </div>
</div>

<div id='info' data-page='template-edit' data-type='items_types' data-id='{{ App.Request.query.get('templateid') }}'></div>

{% endblock body %}