{% extends 'base.html' %}

{% block body %}
<ul class='tabbed-menu'>
  <li data-action='switch-tab' data-tabtarget='1'>{{ 'Preferences'|trans }}</li>
  <li data-action='switch-tab' data-tabtarget='2'>{{ 'Account'|trans }}</li>
  <li data-action='switch-tab' data-tabtarget='3'>{{ 'Templates'|trans }}</li>
  <li data-action='switch-tab' data-tabtarget='4'>{{ 'API keys'|trans }}</li>
  <li data-action='switch-tab' data-tabtarget='5'>{{ 'Notifications'|trans }}</li>
</ul>

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

<!-- Modal for edit permissions -->
<div class='modal fade' id='permModal' tabindex='-1' role='dialog' aria-labelledby='permModalLabel' aria-hidden='true'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='permModalLabel'>{{ 'Edit permissions'|trans }}</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        <!-- CAN READ -->
        <div class='form-group'>
          <i class='fas fa-eye' title='Visibility'></i>
          <label for='canread_select'>{{ 'Visibility'|trans }}</label>
          <select id='canread_select' class='permissionSelectTpl form-control' data-rw='read' data-id='{{ App.Request.query.get('templateid') }}'>
            {% for key, value in visibilityArr %}
            <option value='{{ key }}'>{{ value|trans }}</option>
            {% endfor %}
          </select>
          <!-- CAN WRITE -->
          <i class='fas fa-pencil-alt' title='Can write'></i>
          <label for='canwrite_select'>{{ 'Can write'|trans }}</label>
          <select id='canwrite_select' class='permissionSelectTpl form-control' data-rw='write' data-id='{{ App.Request.query.get('templateid') }}'>
            {% for key, value in visibilityArr %}
            <option value='{{ key }}'>{{ value|trans }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Close'|trans }}</button>
      </div>
    </div>
  </div>
</div>

<!-- TAB 1 - USER PREFERENCES -->
<div data-tabcontent='1' hidden>
  <form class='form-group' action='app/controllers/UcpController.php' method='post'>
    {{ App.Session.get('csrf')|csrf }}
    <!-- LANGUAGE -->
    <section class='box'>
      <h3>{{ 'Language'|trans }}</h3>
      <hr>
      <select class='form-control col-md-3' id='lang' name='lang'>
        {% for lang, text in langsArr|sort %}
          <option value='{{ lang }}'
            {{ App.Users.userData.lang == lang ? ' selected' }}
            >{{ text }}</option>
        {% endfor %}
      </select>
      <p class='mt-2'><a href='https://doc.elabftw.net/contributing.html#translating'>{{ 'Help us to translate eLabFTW!'|trans }}</a></p>
    </section>

    <!-- DISPLAY -->
    <section class='box'>
      <h3>{{ 'Display'|trans }}</h3>
      <hr>
      <label for='limit'>{{ 'Items per page:'|trans }}</label>
      <input id='limit' class='form-control col-md-2' type='text' size='2' maxlength='2' value='{{ App.Users.userData.limit_nb }}' name='limit_nb'>

      <label for='display_size'>{{ 'Display size:'|trans }}</label>
      <select id='display_size' name='display_size' class='form-control col-md-3'>
          <option value='lg' {{ App.Users.userData.display_size == 'lg' ? ' selected' }}>{{ 'Large (default)'|trans }}</option>
          <option value='md' {{ App.Users.userData.display_size == 'md' ? ' selected' }}>{{ 'Medium'|trans }}</option>
          <option value='xs' {{ App.Users.userData.display_size == 'xs' ? ' selected' }}>{{ 'Small'|trans }}</option>
      </select>

      <label for='display_mode'>{{ 'Display mode:'|trans }}</label>
      <select id='display_mode' name='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>

      <label for='orderby'>{{ 'Order by:'|trans }}</label>
      <select id='orderby' name='orderby' class='form-control col-md-3'>
          <option value='cat' {{ App.Users.userData.orderby == 'cat' ? ' selected' }}>{{ 'Category'|trans }}</option>
          <option value='date' {{ App.Users.userData.orderby == 'date' ? ' selected' }}>{{ 'Date'|trans }} {{ '(default)'|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>
          <option value='lastchange' {{ App.Users.userData.orderby == 'lastchange' ? ' selected' }}>{{ 'Last modified'|trans }}</option>
      </select>

      <label for='sort'>{{ 'Sort:'|trans }}</label>
      <select id='sort' name='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>
      <input id='layout' class='mt-2' type='checkbox' name='single_column_layout'
          {{ App.Users.userData.single_column_layout == '1' ? " checked='checked'" }}
      />
      <label for='layout'>{{ 'Use single column layout'|trans }}</label>
      </div>

      <div>
      <input id='uploads_layout' class='mt-2' type='checkbox' name='uploads_layout'
          {{ App.Users.userData.uploads_layout == '1' ? " checked='checked'" }}
      />
      <label for='uploads_layout'>{{ 'Display attached files with thumbnails'|trans }}</label>
      </div>
    </section>

    <section class='box'>
        <h3>{{ 'Keyboard Shortcuts'|trans }}</h3>
        <p>{{ 'Only lowercase letters are allowed.'|trans }}</p>
            <table>
            <tr><th>{{ 'Action'|trans }}</th>
                <th>{{ 'Shortcut'|trans }}</th></tr>

            <tr><td>{{ 'Create'|trans }}</td><td>
                <input type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_create }}' name='sc_create' />
                </td></tr>

                <tr><td>{{ 'Edit'|trans }}</td><td>
                <input type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_edit }}' name='sc_edit' />
                </td></tr>

                <tr><td>{{ 'Submit'|trans }}</td><td>
                <input type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_submit }}' name='sc_submit' />
                </td></tr>

                <tr><td>{{ 'TODO list'|trans }}</td><td>
                <input type='text' pattern='[a-z]' size='1' maxlength='1' value='{{ App.Users.userData.sc_todo }}' name='sc_todo' />
                </td></tr>
            </table>
    </section>

    <!-- PDF CONFIG -->
    <section class='box'>
        <h3>{{ 'PDF configuration'|trans }}</h3>

        <p>
        <label for='pdf_format'>{{ 'Select paper format for PDF'|trans }}</label>
        <select id='pdf_format' name='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>
        <br>

        <input id='cjk_fonts' type='checkbox' name='cjk_fonts'
          {{ App.Users.userData.cjk_fonts == '1' ? " checked='checked'" }}
        />
        <label for='cjk_fonts'>{{ 'Enable Chinese, Japanese and Korean fonts in PDF generation (WARNING: this will dramatically increase the file size unless you disable PDF/A)'|trans }}</label>
        <br>
        <input id='pdfa' type='checkbox' name='pdfa'
          {{ App.Users.userData.pdfa == '1' ? " checked='checked'" }}
        />
        <label for='pdfa'>{{ 'Generate PDF/A compliant pdfs (will embed the fonts and make the file bigger)'|trans }}</label>
        <br>
        <input id='inc_files_pdf' type='checkbox' name='inc_files_pdf'
          {{ App.Users.userData.inc_files_pdf == '1' ? " checked='checked'" }}
        />
        <label for='inc_files_pdf'>{{ 'Add attached files summary to the pdf'|trans }}</label>
        <br>
        <input id='append_pdfs' type='checkbox' name='append_pdfs'
          {{ App.Users.userData.append_pdfs == '1' ? " checked='checked'" }}
        />
        <label for='append_pdfs'>{{ 'Append attached PDFs to exported pdf'|trans }}</label>
        <br>
        <input id='pdf_sig' type='checkbox' name='pdf_sig'
          {{ App.Request.cookies.get('pdf_sig') == '1' ? " checked='checked'" }}
        />
        <label for='pdf_sig'>{{ 'Enable french style signature block in pdf export (setting is only set for this browser)'|trans }}</label>

        </p>
    </section>



    <section class='box'>
        <h3>{{ 'Miscellaneous'|trans }}</h3>
        <p>
        <input id='show_team' type='checkbox' name='show_team'
          {{ App.Users.userData.show_team == '1' ? " checked='checked'" }}
        />
        <label for='show_team'>{{ 'Show experiments from the team on the Experiments page'|trans }}</label>
        <br>
        <input id='show_team_templates' type='checkbox' name='show_team_templates'
               {{ App.Users.userData.show_team_templates == '1' ? " checked='checked'" }}
        />
        <label for='show_team_templates'>{{ 'Show templates from the team on the Templates page and in the menus'|trans }}</label>
        <br>
        <input id='show_public' type='checkbox' name='show_public'
               {{ App.Users.userData.show_public == '1' ? " checked='checked'" }}
        />
        <label for='show_public'>{{ 'Show experiments/database items from outside the team'|trans }}</label>
        <br>
        <input id='chem_editor' type='checkbox' name='chem_editor'
          {{ App.Users.userData.chem_editor == '1' ? " checked='checked'" }}
        />
        <label for='chem_editor'>{{ 'Display the molecule editor in edit mode'|trans }}</label>
        <br>
        <input id='use_markdown' type='checkbox' name='use_markdown'
          {{ App.Users.userData.use_markdown == '1' ? " checked='checked'" }}
        />
        <label for='use_markdown'>{{ 'Disable the rich text editor and write Markdown directly'|trans }}</label>
        <br>
        <input id='use_isodate' type='checkbox' name='use_isodate'
          {{ App.Users.userData.use_isodate == '1' ? " checked='checked'" }}
        />
        <label for='use_isodate'>{{ 'Use ISO datetime in the text editor instead of localized one'|trans }}</label>
        </p>

        <p>
        <label for='default-read-select'>{{ 'Default visibility for new experiments'|trans }}</label>
        <select id='default-read-select' name='default_read'>
          {% for key, value in visibilityArr %}
            <option value='{{ key }}' {{ App.Users.userData.default_read == key ? " selected='selected'" }}>{{ value|trans }}</option>
          {% endfor %}
        </select>
        </p>
        <p>
        <label for='default-write-select'>{{ 'Default write permission for new experiments'|trans }}</label>
        <select id='default-write-select' name='default_write'>
          {% for key, value in visibilityArr %}
            <option value='{{ key }}' {{ App.Users.userData.default_write == key ? " selected='selected'" }}>{{ value|trans }}</option>
          {% endfor %}
        </select>
        </p>

    </section>

    <div class='text-center mt-3'>
        <button type='submit' name='Submit' class='button btn btn-primary'>{{ 'Save'|trans }}</button>
    </div>

  </form>

</div>

<!-- TAB 2 - USER INFORMATION -->
<div class='box' data-tabcontent='2' hidden>
    <form class='form-group' method='post' action='app/controllers/UcpController.php'>
      {{ 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='row'>
          <div class='col-md-6'>
            <h4>{{ 'Modify your personal informations'|trans }}</h4>
              <label for='currpass'>{{ 'Enter your password to edit your profile.'|trans }}</label>
              <div class='input-group'>
                <input class='form-control' id='currpass' name='currpass' 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='currpass'><i class='fas fa-eye' aria-hidden='true'></i></span>
                </div>
              </div>
            <label for='email'>{{ 'Email'|trans }}</label>
            <input class='form-control' name='email' id='email' type='email' value='{{ App.Users.userData.email }}' />
          </div>
          <div class='col-md-6'>
            <h4>{{ 'Modify your password'|trans }}</h4>
            <label for='newpass'>{{ 'New password'|trans }}</label>
            <div class='input-group'>
              <input class='form-control' id='newpass' autocomplete='new-password' name='newpass' type='password' pattern='.{8,}' autocomplete='new-password' />
              <div class='input-group-append'>
                <span class='btn btn-light input-border' tabindex='-1' data-action='toggle-password' data-target='newpass'><i class='fas fa-eye' aria-hidden='true'></i></span>
              </div>
            </div>
          </div>
        </div>
        <hr><br>
      {% endif %}

        <h4>{{ 'Two Factor Authentication'|trans }}</h4>
        <div class='row'>
          <div class='col-md-6'>
            <label for='use_mfa'>{{ 'Use two-factor authentication?'|trans }}</label>
            <select class='form-control' 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>

        <hr><br>
        <h4>{{ 'Modify your identity'|trans }}</h4>

        <div class='row'>
          <div class='col-md-6'>
            <label for='firstname'>{{ 'Firstname'|trans }}</label>
            <input class='form-control' id='firstname' name='firstname' value='{{ App.Users.userData.firstname|raw }}' />
          </div>

          <div class='col-md-6'>
            <label for='lastname'>{{ 'Lastname'|trans }}</label>
            <input class='form-control' id='lastname' name='lastname' value='{{ App.Users.userData.lastname|raw }}' />
          </div>
        </div>

        <hr><br>
        <h4>{{ 'Modify your contact information'|trans }}</h4>
        <div class='row'>
            <div class='col-md-6'>
                <label for='phone'>{{ 'Phone'|trans }} </label>
                <input class='form-control' id='phone' name='phone' value='{{ App.Users.userData.phone }}' />
            </div>
            <div class='col-md-6'>
                <label for='cellphone'>{{ 'Mobile'|trans }}</label>
                <input class='form-control' id='cellphone' name='cellphone' value='{{ App.Users.userData.cellphone }}' />
            </div>
        </div>
        <div class='row'>
            <div class='col-md-6'>
                <label for='skype'>{{ 'Skype'|trans }}</label>
                <input class='form-control' id='skype' name='skype' value='{{ App.Users.userData.skype }}' />
            </div>
            <div class='col-md-6'>
                <label for='website'>{{ 'Website'|trans }}</label>
                <input class='form-control' id='website' name='website' type='url' value='{{ App.Users.userData.website }}' autocomplete='url' />
            </div>
        </div>

        <div class='mt-4 text-center'>
            <button type='submit' name='Submit' class='button btn btn-primary'>{{ 'Update profile'|trans }}</button>
        </div>
    </form>
</div>

<!-- TAB 3 - USER TEMPLATES -->
<div data-tabcontent='3' hidden>
  {% include 'show-templates-edit.html' %}
</div>

<!-- TAB 4 - API KEYS -->
<div class='box' data-tabcontent='4' hidden>
  <h3>{{ 'API keys'|trans }}</h3>
  <div id='newKeyPlaceholder'></div>
  <h5>{{ 'Create new key'|trans }}</h5>
  <div class='row form-inline mx-0'>
    <label for='apikeyName' class='mb-2'>{{ 'Name'|trans }}</label>
    <input id='apikeyName' type='text' class='form-control mb-2 mr-sm-2' />
    <label for='apikeyCanwrite' class='mb-2'>{{ 'Permissions'|trans }}</label>
    <select id='apikeyCanwrite' autocomplete='off' class='form-control mb-2 mr-sm-2'>
      <option value='0'>{{ 'Read Only'|trans }}</option>
      <option value='1'>{{ 'Read/Write'|trans }}</option>
    </select>
    <button class='button btn btn-primary mb-2' type='submit' data-action='create-apikey'>{{ 'Generate an API Key'|trans }}</button>
  </div>

  <h5>{{ 'Existing keys'|trans }}</h5>
  <table id='apiTable' class='table'>
    <thead>
      <tr>
        <th scope='col'>#</th>
        <th scope='col'>{{ 'Name'|trans }}</th>
        <th scope='col'>{{ 'Permissions'|trans }}</th>
        <th scope='col'>{{ 'Creation date'|trans }}</th>
        <th scope='col'>{{ 'Action'|trans }}</th>
      </tr>
    </thead>
    <tbody>
      {% for key in apiKeysArr %}
        <tr>
          <th scope='row'>{{ loop.index }}</th>
          <td>{{ key.name }}</td>
          <td>{{ key.can_write ? 'Read/Write'|trans : 'Read Only'|trans }}</td>
          <td>{{ key.created_at }}</td>
          <td><a data-action='destroy-apikey' title='{{ 'Delete'|trans }}' data-apikeyid='{{ key.id }}'><i class='fas fa-trash-alt fa-2x'></i></a></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- TAB 5 - NOTIFICATIONS SETTINGS -->
<div class='box' data-tabcontent='5' hidden>
  <h3>{{ 'Notifications settings'|trans }}</h3>
  <table class='mt-4'>
    <tr>
      <th>{{ 'Notification category'|trans }}</th>
      <th>{{ 'Web'|trans }}</th>
      <th>{{'Email'|trans }}</th>
    </tr>
    {% for notif in notificationsSettings %}
      <tr>
        <td>{{ notif.designation }}</td>
        <td>
          <input type='checkbox' data-trigger='change' data-model='user' data-target='{{ notif.setting }}' {{ App.Users.userData[notif.setting] == '1' ? " checked='checked'" }} />
        </td>
        <td>
          <input type='checkbox' data-trigger='change' data-model='user' data-target='{{ notif.setting }}_email' {{ App.Users.userData[notif.setting ~ '_email'] == '1' ? " checked='checked'" }}/>
        </td>
      </tr>
    {% endfor %}
  </table>
</div>
<!-- END PAGE -->

{% endblock body %}