{% extends 'base.html' %}
{% block body %}
<ul class='tabbed-menu'>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='1'>{{ 'General'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='2'>{{ 'Account'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='3'>{{ 'API keys'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='4'>{{ 'Notifications'|trans }}</button></li>
</ul>

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

{# Modal for regenerating sigkeys #}
<div class='modal fade' id='regenerateSigkeysModal' tabindex='-1' role='dialog' aria-labelledby='regenerateSigkeysModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='regenerateSigkeysModalLabel'>{{ 'Regenerate signature keys'|trans }}</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body' data-wait='{{ 'Please wait…'|trans }}'>
        <p>{{ 'Warning: regenerating your signature keys means the current key will be archived and will not be available anymore.'|trans }}</p>
        <label for='regen_sigPassphraseInput'>{{ 'Enter a passphrase:'|trans }}</label>
        <div class='input-group'>
          <input type='password' class='form-control' autocomplete='new-password' id='regen_sigPassphraseInput' minlength='{{ App.Config.configArr.min_password_length }}' />
          <div class='input-group-append'>
            <span class='btn btn-light input-border' tabindex='-1' data-action='toggle-password' data-target='regen_sigPassphraseInput'><i class='fas fa-eye' aria-hidden='true'></i></span>
          </div>
        </div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Cancel'|trans }}</button>
        <button type='button' class='btn btn-primary' data-action='regenerate-sigkeys' data-dismiss='modal'>{{ 'Regenerate signature keys'|trans }}</button>
      </div>
    </div>
  </div>
</div>

{# TAB 1 - USER PREFERENCES #}
<div data-tabcontent='1' hidden>
  {# LANGUAGE #}
  <h2 class='p-2 pl-3 section-title'>{{ 'Preferences'|trans }}</h2>
  <div class='pl-3 mt-2 mb-5'>
    <div class='d-flex justify-content-between'>
      <label for='lang' class='col-form-label'>{{ 'Language'|trans }}</label>
      <select class='form-control col-md-3' id='lang' data-trigger='change' data-model='users/me' data-target='lang'>
        {% for lang, text in langsArr|sort %}
          <option value='{{ lang }}'
            {{ App.Users.userData.lang == lang ? ' selected' }}
            >{{ text }}</option>
        {% endfor %}
      </select>
    </div>
    <p class='mt-1 font-weight-bold'><a target='_blank' rel='noopener' class='external-link' href='https://doc.elabftw.net/contributing.html#translating'>{{ 'Help us translate eLabFTW!'|trans }}</a></p>
  </div>

  {# DISPLAY #}
  <h2 class='p-2 pl-3 section-title'>{{ 'Display'|trans }}</h2>
  <div class='pl-3 mt-2 mb-5'>

    <div class='d-flex justify-content-between'>
      <label for='limit' class='col-form-label'>{{ 'Items per page'|trans }}</label>
      <input id='limit' class='form-control col-md-2' type='number' min='1' max='99' value='{{ App.Users.userData.limit_nb }}' data-trigger='blur' data-model='users/me' data-target='limit_nb'>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='display_mode' class='col-form-label'>{{ 'Display mode'|trans }}</label>
      <select id='display_mode' data-trigger='change' data-model='users/me' data-target='display_mode' class='form-control col-md-3'>
          <option value='it' {{ App.Users.userData.display_mode == 'it' ? ' selected' }}>{{ 'Item list (default)'|trans }}</option>
          <option value='tb' {{ App.Users.userData.display_mode == 'tb' ? ' selected' }}>{{ 'Tabular'|trans }}</option>
      </select>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='orderby' class='col-form-label'>{{ 'Order by'|trans }}</label>
      <select id='orderby' data-trigger='change' data-model='users/me' data-target='orderby' class='form-control col-md-3'>
          <option value='lastchange' {{ App.Users.userData.orderby == 'lastchange' ? ' selected' }}>{{ 'Last modified'|trans }} {{ '(default)'|trans }}</option>
          <option value='cat' {{ App.Users.userData.orderby == 'cat' ? ' selected' }}>{{ 'Category'|trans }}</option>
          <option value='date' {{ App.Users.userData.orderby == 'date' ? ' selected' }}>{{ 'Date'|trans }}</option>
          <option value='title' {{ App.Users.userData.orderby == 'title' ? ' selected' }}>{{ 'Title'|trans }}</option>
          <option value='comment' {{ App.Users.userData.orderby == 'comment' ? ' selected' }}>{% trans %}Comment{% plural 1 %}Comments{% endtrans %}</option>
      </select>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='sort' class='col-form-label'>{{ 'Sort'|trans }}</label>
      <select id='sort' data-trigger='change' data-model='users/me' data-target='sort' class='form-control col-md-3'>
        <option value='default' {{ App.Users.userData.sort == null ? ' selected' }}>{{ 'Use default'|trans }}</option>
        <option value='asc' {{ App.Users.userData.sort == 'asc' ? ' selected' }}>{{ 'ASC'|trans }}</option>
        <option value='desc' {{ App.Users.userData.sort == 'desc' ? ' selected' }}>{{ 'DESC'|trans }}</option>
      </select>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='entrypoint' class='col-form-label'>{{ 'Which page will be loaded first'|trans }}</label>
      <select id='entrypoint' data-trigger='change' data-model='users/me' data-target='entrypoint' class='form-control col-md-3'>
        {# NOTE: it is currently not practical to use enums in twig. So we hardcode the value for now. FIXME. See: https://github.com/twigphp/Twig/issues/3681 #}
        <option value='0' {{ App.Users.userData.entrypoint == '0' ? ' selected' }}>{{ 'Dashboard'|trans }} {{ '(default)'|trans }}</option>
        <option value='1' {{ App.Users.userData.entrypoint == '1' ? ' selected' }}>{% trans %}Experiment{% plural 2 %}Experiments{% endtrans %}</option>
        <option value='2' {{ App.Users.userData.entrypoint == '2' ? ' selected' }}>{{ 'Resources'|trans }}</option>
        <option value='3' {{ App.Users.userData.entrypoint == '3' ? ' selected' }}>{{ 'Scheduler'|trans }}</option>
      </select>
    </div>
  </div>

  {# SCHEDULER SETTINGS #}
  <h2 id='schedulerSettings' class='p-2 pl-3 section-title'>{{ 'Scheduler'|trans }}</h2>

  <div class='pl-3 mt-2 mb-5'>
    {# setting to toggle the display of week-ends on teams scheduler tab https://fullcalendar.io/docs/weekends #}
    {% include 'binary-setting.html' with {'label': 'Show weekends'|trans, 'model': 'users/me', 'slug': 'show_weekends', 'src': App.Users.userData} %}
  </div>

  {# KEYBOARD SHORTCUTS #}
  <h2 id='keyboardShortcuts' class='p-2 pl-3 section-title'>{{ 'Keyboard Shortcuts'|trans }}</h2>
  <div class='pl-3 mt-2 mb-5'>
    <table aria-describedby='keyboardShortcuts' class='table col-md-12'>
      <thead>
      <tr>
        <th scope='col'>{{ 'Action'|trans }}</th>
        {# add mb-0 to labels so they align with the Action that has vertical-align: bottom from tables.scss, but label element has a mb from reboot.scss #}
        <th scope='col'><label class='mb-0' for='sc_input_create'>{{ 'Create'|trans }}</label></th>
        <th scope='col'><label class='mb-0' for='sc_input_edit'>{{ 'Edit'|trans }}</label></th>
        <th scope='col'><label class='mb-0' for='sc_input_favorite'>{{ 'Favorite tags'|trans }}</label></th>
        <th scope='col'><label class='mb-0' for='sc_input_todo'>{{ 'TODO list'|trans }}</label></th>
        <th scope='col'><label class='mb-0' for='sc_input_search'>{{ 'Search'|trans }}</label></th>
      </tr>
      </thead>
      <tbody class='bgnd-transparent'>
      <tr>
        <th scope='row' class='align-middle' style='font-weight:500;'>{{ 'Shortcut'|trans }}</td>
        <td data-label='{{ 'Create'|trans }}'>
          <input class='form-control col-md-2 p-1 text-center' id='sc_input_create' type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_create }}' data-trigger='blur' data-model='users/me' data-target='sc_create' />
        </td>

        <td data-label='{{ 'Edit'|trans }}'>
          <input class='form-control col-md-2 p-1 text-center' id='sc_input_edit' type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_edit }}' data-trigger='blur' data-model='users/me' data-target='sc_edit' />
        </td>

        <td data-label='{{ 'Favorite tags'|trans }}'>
          <input class='form-control col-md-2 p-1 text-center' id='sc_input_favorite' type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_favorite }}' data-trigger='blur' data-model='users/me' data-target='sc_favorite' />
        </td>

        <td data-label='{{ 'TODO list'|trans }}'>
          <input class='form-control col-md-2 p-1 text-center' id='sc_input_todo' type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_todo }}' data-trigger='blur' data-model='users/me' data-target='sc_todo' />
        </td>

        <td data-label='{{ 'Search'|trans }}'>
          <input class='form-control col-md-2 p-1 text-center' id='sc_input_search' type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_search }}' data-trigger='blur' data-model='users/me' data-target='sc_search' />
        </td>
      </tr>
      </tbody>
    </table>
    <p class='smallgray mt-2'>{{ 'Only lowercase letters are allowed.'|trans }}</p>

    <hr>
    <div class='d-flex justify-content-between'>
      {# setting added for WCAG2.1 2.1.4 Character Key Shortcuts https://www.w3.org/TR/WCAG21/#character-key-shortcuts #}
      <label for='disable_shortcuts' class='col-form-label'>{{ 'Disable all shortcuts'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='disable_shortcuts' {{ App.Users.userData.disable_shortcuts == 1 ? 'checked="checked"' }} id='disable_shortcuts'>
        <span class='slider'></span>
      </label>
    </div>

  </div>

  {# PDF CONFIG #}
  <h2 class='p-2 pl-3 section-title'>{{ 'PDF configuration'|trans }}</h2>
  <div class='pl-3 mt-2 mb-5'>
    <div class='d-flex justify-content-between'>
      <label for='pdf_format' class='col-form-label'>{{ 'Select paper format for PDF'|trans }}</label>
      <select id='pdf_format' class='form-control col-md-3' data-trigger='change' data-model='users/me' data-target='pdf_format'>
          <option value='A4'{{ App.Users.userData.pdf_format == 'A4' ? ' selected' : '' }}>A4</option>
          <option value='LETTER'{{ App.Users.userData.pdf_format == 'LETTER' ? ' selected' : '' }}>Letter</option>
          <option value='ROYAL'{{ App.Users.userData.pdf_format == 'ROYAL' ? ' selected' : '' }}>Royal</option>
      </select>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <div>
        <label for='cjk_fonts' class='col-form-label'>{{ 'Enable Chinese, Japanese and Korean fonts in PDF generation'|trans }}</label>
        <p class='smallgray'>{{ 'WARNING: this will dramatically increase the file size unless you disable PDF/A'|trans }}</p>
      </div>
      <label class='switch ucp-align'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='cjk_fonts' {{ App.Users.userData.cjk_fonts == 1 ? 'checked="checked"' }} id='cjk_fonts'>
        <span class='slider'></span>
      </label>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='inc_files_pdf' class='col-form-label'>{{ 'Add attached files summary to the PDF'|trans }}</label>
      <label class='switch ucp-align' title='{{ 'Add attached files summary to the PDF'|trans }}'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='inc_files_pdf' {{ App.Users.userData.inc_files_pdf == 1 ? 'checked="checked"' }} id='inc_files_pdf'>
        <span class='slider'></span>
      </label>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='append_pdfs' class='col-form-label'>{{ 'Append attached PDFs to exported PDF'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='append_pdfs' {{ App.Users.userData.append_pdfs == 1 ? 'checked="checked"' }} id='append_pdfs'>
        <span class='slider'></span>
      </label>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='pdf_sig' class='col-form-label'>{{ 'Enable french style signature block in PDF Export'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='pdf_sig' {{ App.Users.userData.pdf_sig == 1 ? 'checked="checked"' }} id='pdf_sig'>
        <span class='slider'></span>
      </label>
    </div>
  </div>

  <h2 class='p-2 pl-3 section-title'>{{ 'Miscellaneous'|trans }}</h2>
  <div class='pl-3 mt-2'>

    <div class='d-flex justify-content-between'>
      <label for='use_markdown' class='col-form-label'>{{ 'Disable the rich text editor and write Markdown directly'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='use_markdown' {{ App.Users.userData.use_markdown == 1 ? 'checked="checked"' }} id='use_markdown'>
        <span class='slider'></span>
      </label>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='use_isodate' class='col-form-label'>{{ 'Use ISO datetime in the text editor instead of localized one'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='use_isodate' {{ App.Users.userData.use_isodate == 1 ? 'checked="checked"' }} id='use_isodate'>
        <span class='slider'></span>
      </label>
    </div>
    <hr>

    <div class='d-flex justify-content-between align-items-center'>
      <span class='col-form-label d-inline-block' id='defaultCanreadSetting'>{{ 'Default visibility for new experiments'|trans }}</span>
      <div>
        {% set rw = 'canread' %}
        {{ include('view-permissions-details.html', {identifier: 'canreaddefaultPermissions'}) }}
        {{ include('permissions-edit-modal.html', {ucpPage: true}) }}
        <button type='button' aria-labelledby='defaultCanreadSetting' data-action='toggle-modal' data-target='permModal-{{ rw }}defaultPermissions' class='btn p-0 m-0 lh-normal border-0'>
          <i class='fas fa-square-plus fa-2x'></i>
        </button>
      </div>
    </div>
    <hr>

    <div class='d-flex justify-content-between align-items-center'>
      <span class='col-form-label d-inline-block' id='defaultCanwriteSetting'>{{ 'Default write permission for new experiments'|trans }}</span>
      <div>
        {% set rw = 'canwrite' %}
        {{ include('view-permissions-details.html', {identifier: 'canwritedefaultPermissions'}) }}
        {{ include('permissions-edit-modal.html', {ucpPage: true}) }}
        <button type='button' aria-labelledby='defaultCanwriteSetting' data-action='toggle-modal' data-target='permModal-{{ rw }}defaultPermissions' class='btn p-0 m-0 lh-normal border-0'>
          <i class='fas fa-square-plus fa-2x'></i>
        </button>
      </div>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='always_show_owned' class='col-form-label'>{{ 'Always display your own entries, regardless of the current team'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='always_show_owned' {{ App.Users.userData.always_show_owned == 1 ? 'checked="checked"' }} id='always_show_owned'>
        <span class='slider'></span>
      </label>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='enforce_exclusive_edit_mode' class='col-form-label'>{{ 'Enforce exclusive edit mode: each entry you start editing will be in exclusive edit mode.'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' data-trigger='change' data-model='users/me' data-target='enforce_exclusive_edit_mode' {{ App.Users.userData.enforce_exclusive_edit_mode == 1 ? 'checked="checked"' }} id='enforce_exclusive_edit_mode'>
        <span class='slider'></span>
      </label>
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <div>
        <label for='scope_teamgroups' class='col-form-label'>{{ 'Select the scope for teamgroups'|trans }}</label>
        <p class='smallgray'>{{ 'This setting controls which teamgroups will be listed in the permission settings window.'|trans }}</p>
      </div>
      <select id='scope_teamgroups' data-trigger='change' data-model='users/me' data-target='scope_teamgroups' class='form-control col-md-3'>
        {# NOTE: it is currently not practical to use enums in twig. So we hardcode the value for now. FIXME. See: https://github.com/twigphp/Twig/issues/3681 #}
        <option value='1' {{ App.Users.userData.scope_teamgroups == 1 ? ' selected' }}>{{ 'Self'|trans }}</option>
        <option value='2' {{ App.Users.userData.scope_teamgroups == 2 ? ' selected' }}>{{ 'Team'|trans }}</option>
        <option value='3' {{ App.Users.userData.scope_teamgroups == 3 ? ' selected' }}>{{ 'Everything'|trans }}</option>
      </select>
    </div>
  </div>

</div>

{# TAB 2 - USER INFORMATION #}
<div data-tabcontent='2' hidden>
  <form class='form-group' method='post' action='app/controllers/UcpController.php' aria-label='{{ 'User information'|trans }}'>
    <input type='hidden' name='origin' value='ucp_tab_2' />
    {{ App.Session.get('csrf')|csrf }}
    {# only show the email/password fields for locally authenticated users #}
    {% if App.Users.userData.auth_service == constant('Elabftw\\Controllers\\LoginController::AUTH_LOCAL') %}

    <div class='pl-3 mb-5'>
      <div class='d-flex justify-content-between'>
        <label for='current_password' class='col-form-label'>{{ 'Enter your password to edit your profile.'|trans }}</label>
        <div class='input-group col-md-3 px-0'>
          <input class='form-control' id='current_password' name='current_password' type='password' autocomplete='current-password' pattern='.{8,}' required />
          <div class='input-group-append'>
            <span class='btn btn-light input-border' tabindex='-1' data-action='toggle-password' data-target='current_password'><i class='fas fa-eye' aria-hidden='true'></i></span>
          </div>
        </div>
      </div>
    </div>

    <h2 class='p-2 pl-3 section-title'>{% trans %}Personal information{% plural 2 %}Personal information{% endtrans %}</h2>
    <div class='pl-3 mt-2 mb-5'>

      <div class='d-flex justify-content-between'>
        <label for='email' class='col-form-label'>{{ 'Email'|trans }}</label>
        <input class='form-control col-md-3' {{ App.Config.configArr.allow_users_change_identity == '0' ? 'disabled' }} name='email' id='email' type='email' value='{{ App.Users.userData.email|e('html_attr') }}' />
      </div>
      <hr>

      <div class='d-flex justify-content-between'>
        <label for='password' class='col-form-label'>{{ 'Modify your password'|trans }}</label>
        <div class='input-group col-md-3 px-0'>
          <input class='form-control' minlength='{{ App.Config.configArr.min_password_length }}' title='{{ 'Minimum password length: %d.'|trans|format(App.Config.configArr.min_password_length) }} {{ passwordInputHelp|e('html_attr') }}' id='password' name='password' type='password' pattern='{{ passwordInputPattern|e('html_attr') }}' autocomplete='new-password' />
          <div class='input-group-append'>
            <span class='btn btn-light input-border' tabindex='-1' data-action='toggle-password' data-target='password'><i class='fas fa-eye' aria-hidden='true'></i></span>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    {# only show MFA setting if not enforced #}
    {% if showMFA %}
      <h2 class='p-2 pl-3 section-title'>{{ 'Two Factor Authentication'|trans }}</h2>
      <div class='pl-3 mt-2 mb-5'>
        <div class='d-flex justify-content-between'>
          <label for='use_mfa' class='col-form-label'>{{ 'Use two-factor authentication?'|trans }}</label>
          <select class='form-control col-md-3' autocomplete='off' name='use_mfa' id='use_mfa'>
            <option value='on' {{- App.Users.userData.mfa_secret ? ' selected' }}>{{ 'Yes'|trans }}</option>
            <option value='off' {{- not App.Users.userData.mfa_secret ? ' selected' }}>{{ 'No'|trans }}</option>
          </select>
        </div>
      </div>
    {% endif %}
    <div class='mt-4 text-center'>
      <button type='submit' class='btn btn-primary'>{{ 'Save'|trans }}</button>
    </div>
  </form>

  <hr>
  <h2 class='p-2 pl-3 section-title'>{{ 'Your identity'|trans }}</h2>
  <div class='pl-3 mt-2 mb-5' id='ucp-account-form'>
    <div class='d-flex justify-content-between'>
      <label for='firstname' class='col-form-label'>{{ 'Firstname'|trans }}</label>
      <input class='form-control col-md-3' {{ App.Config.configArr.allow_users_change_identity == '0' ? 'disabled' }} type='text' id='firstname' name='firstname' value='{{ App.Users.userData.firstname|e('html_attr') }}' />
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='lastname' class='col-form-label'>{{ 'Lastname'|trans }}</label>
      <input class='form-control col-md-3' {{ App.Config.configArr.allow_users_change_identity == '0' ? 'disabled' }} type='text' id='lastname' name='lastname' value='{{ App.Users.userData.lastname|e('html_attr') }}' />
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='orcid' class='col-form-label'>ORCID</label>
      <input class='form-control col-md-3' type='text' placeholder='0000-0002-1234-1111' title='0000-1111-2222-3333' pattern='[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{3}[0-9X]' id='orcid' name='orcid' value='{{ App.Users.userData.orcid }}' />
    </div>
    <hr>
  </div>

  <div class='mt-4 text-center'>
    <button type='button' data-action='patch-account' class='btn btn-primary'>{{ 'Save'|trans }}</button>
  </div>

  <h2 class='p-2 pl-3 section-title mt-4'>{{ 'Signature keys'|trans }}</h2>
  <div class='pl-3 mt-2 mb-5' id='ucp-sigkeys'>
    <div class='dropdown float-right'>
      <button class='btn p-2 hl-hover-gray' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' title='{{ 'More options'|trans }}' aria-label='{{ 'More options'|trans }}' type='button'>
        <i class='fas fa-ellipsis-v fa-fw'></i>
      </button>
      <div class='dropdown-menu dropdown-menu-right'>
        <button type='button' data-action='download-sigkey' data-target='sig_privkey' class='btn btn-dropdown-item dropdown-item'>
          <i class='mr-1 fas fa-download fa-fw'></i>{{ 'Download private key'|trans }}
        </button>
        <button type='button' data-action='download-sigkey' data-target='sig_pubkey' class='btn btn-dropdown-item dropdown-item'>
          <i class='mr-1 fas fa-download fa-fw'></i>{{ 'Download public key'|trans }}
        </button>
        <div class='dropdown-divider'></div>
        <button type='button' data-action='toggle-modal' data-target='regenerateSigkeysModal' class='btn btn-dropdown-item hover-danger dropdown-item'>
          <i class='mr-1 fas fa-recycle fa-fw'></i>{{ 'Regenerate signature keys'|trans }}
        </button>
      </div>
    </div>
    <p>{{ 'Signature keys are a highly secure public-key signature system that allows you to cryptographically sign experiments or resources. Signing an entry will generate an immutable archive.'|trans }}</p>
    <p class='smallgray'>{{ 'To learn more about signature keys, have a look at the %scomplete documentation%s.'|trans|format("<a class='external-link' target='_blank' rel='noopener' href='https://doc.elabftw.net/user-guide.html#signatures'>", "</a>")|raw }}</p>
    {% if not App.Users.userData.sig_privkey %}
      <p>{{ 'You do not have a key pair associated with your account yet.'|trans|msg('warning', false) }}<p>
    <label for='sigPassphraseInput'>{{ 'To generate a key pair, enter a passphrase below and click the button:'|trans }}</label>
    <div class='input-group'>
      <input type='password' class='form-control' autocomplete='new-password' id='sigPassphraseInput' minlength='{{ App.Config.configArr.min_password_length }}' />
      <div class='input-group-append'>
        <button type='button' class='btn btn-light input-border' data-action='toggle-password' data-target='sigPassphraseInput' title='{{ 'Show password'|trans }}' aria-label='{{ 'Show password'|trans }}'><i class='fas fa-eye' aria-hidden='true'></i></button>
        <button type='button' data-action='create-sigkeys' class='btn btn-primary'>{{ 'Generate signature keys'|trans }}</button>
      </div>
    </div>
      <span class='smallgray'>{{ 'Tip: use a password manager or a passphrase that you can remember, see %sthis XKCD comic%s.'|trans|format("<a target='_blank' rel='noopener' class='external-link' href='https://xkcd.com/936/'>", "</a>")|raw }}</span>
    {% else %}
      <p>{{ 'Your account is already associated with a keypair.'|trans|msg('ok', false) }}<p>
      <p>{{ 'Here is your public key. You can share it with the world:'|trans }}<p>
      <textarea class='form-control' disabled>{{ App.Users.userData.sig_pubkey }}</textarea>
    {% endif %}

  </div>
</div>

{# TAB 4 - API KEYS #}
<div data-tabcontent='3' hidden>
  <p><a target='_blank' rel='noopener' class='external-link' href='https://doc.elabftw.net/api.html'>{{ 'Link to documentation'|trans }}</a></p>
  <h2 class='p-2 pl-3 section-title'>{{ 'Create new key'|trans }}</h2>

  {# hidden new key block #}
  <div hidden id='newApiKeyInputGroup'>
    {{ "This is the only time the key will be shown! Make sure to copy it somewhere safe as you won't be able to see it again:"|trans|msg('warning', false) }}
    <div class='input-group'>
      <div class='input-group-prepend'>
        <button title='{{ 'Copy to clipboard'|trans }}' class='btn btn-outline-secondary' type='button' data-action='copy-to-clipboard' data-target='newApiKeyInput'><i class='fas fa-clone'></i></button>
      </div>
      <input type='text' class='form-control' readonly id='newApiKeyInput' value=''>
    </div>
  </div>

  <div class='pl-3 mt-2 mb-5'>

    <div class='d-flex justify-content-between'>
      <label for='apikeyName' class='col-form-label'>{{ 'Name'|trans }}</label>
      <input id='apikeyName' type='text' class='form-control col-md-3' />
    </div>
    <hr>

    <div class='d-flex justify-content-between'>
      <label for='apikeyCanwrite' class='col-form-label'>{{ 'Permissions'|trans }}</label>
      <select id='apikeyCanwrite' autocomplete='off' class='form-control col-md-3'>
        <option value='0'>{{ 'Read Only'|trans }}</option>
        <option value='1'>{{ 'Read/Write'|trans }}</option>
      </select>
    </div>
    <hr>

    <div class='mt-4 text-center'>
      <button type='button' data-action='create-apikey' class='btn btn-primary'>{{ 'Generate an API Key'|trans }}</button>
    </div>

  </div>

  <h2 class='p-2 pl-3 section-title mb-3' id='existingKeys'>{{ 'Existing keys'|trans }}</h2>
  <table class='table' aria-describedby='existingKeys' data-table-sort='true'>
    <thead>
      <tr>
        <th scope='col'>{{ 'Team'|trans }}</th>
        <th scope='col'>{{ 'Name'|trans }}</th>
        <th scope='col'>{{ 'Permissions'|trans }}</th>
        <th scope='col'>{{ 'Creation date'|trans }}</th>
        <th scope='col'>{{ 'Last used'|trans }}</th>
        <th scope='col'>{{ 'Action'|trans }}</th>
      </tr>
    </thead>
    <tbody id='apiTable'>
      {% for key in apiKeysArr %}
        <tr>
          <td data-label='{{ 'Team'|trans }}'><span class='user-badge'>{{ key.team_name }}</span></td>
          <td data-label='{{ 'Name'|trans }}'>{{ key.name }}</td>
          <td data-label='{{ 'Permissions'|trans }}'>{{ key.can_write ? 'Read/Write'|trans : 'Read Only'|trans }}</td>
          <td data-label='{{ 'Creation date'|trans }}'><span class='relative-moment' title='{{ key.created_at }}'></span></td>
          <td data-label='{{ 'Last used'|trans }}'><span class='relative-moment' title='{{ key.last_used_at|default('never'|trans) }}'></span></td>
          <td data-label='{{ 'Action'|trans }}'><button type='button' class='btn hl-hover-gray lh-normal border-0 p-2 m-0 my-n2' data-action='destroy-apikey' title='{{ 'Delete'|trans }}' aria-label='{{ 'Delete'|trans }}' data-apikeyid='{{ key.id }}'><i class='fas fa-trash-alt fa-fw'></i></button></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{# TAB 5 - NOTIFICATIONS SETTINGS #}
<div data-tabcontent='4' hidden>
  <h2 class='p-2 pl-3 section-title mb-3' id='notificationsSettings'>{{ 'Notifications settings'|trans }}</h2>
  <div class='pl-3'>
  {% for notif in notificationsSettings %}
    <div class='d-flex justify-content-between'>
      <label class='col-form-label'>{{ notif.designation }}</label>
      <div class='d-flex flex-column align-items-end'>
        <div class='d-flex align-self-center'>
          <label class='col-form-label px-2' for='{{ notif.setting }}'>{{ 'Web'|trans }}</label>
          <label class='switch ucp-align'>
            <input type='checkbox' id='{{ notif.setting }}' data-trigger='change' data-model='users/me' data-target='{{ notif.setting }}' {{ App.Users.userData[notif.setting] == 1 ? " checked='checked'" }}>
            <span class='slider'></span>
          </label>
        </div>
        <div class='d-flex align-self-center'>
          <label class='col-form-label px-2' for='{{ notif.setting }}_email'>{{ 'Email'|trans }}</label>
          <label class='switch ucp-align'>
            <input type='checkbox' id='{{ notif.setting }}_email' data-trigger='change' data-model='users/me' data-target='{{ notif.setting }}_email' {{ App.Users.userData[notif.setting ~ '_email'] == 1 ? " checked='checked'" }}>
            <span class='slider'></span>
          </label>
        </div>
      </div>
    </div>
    <hr>
  {% endfor %}
  </div>
</div>
{# END PAGE #}

{% endblock body %}