{% import "components/ui/v1.html" as ui_v1 %}
{% extends "manage_base.html" %}
{% block manage_content %}
<section class="section ui-panel manage-user-import-page" data-user-import>
  <header class="ui-panel__header">
    <h1 class="section__title ui-panel__title" data-heading>{{ _('Import User') }}</h1>
  </header>

  <div class="ui-panel__body ui-stack">
    {{ noscript_note.render() }}

    <div class="ui-toolbar" aria-label="{{ _('Import method') }}">
      <div class="ui-toolbar__group">
        <strong>{{ _('Import method') }}</strong>
      </div>
      <div class="ui-actions" role="group" aria-label="{{ _('Import method') }}">
        <button
          type="button"
          class="rounded primary button"
          id="user-import-mode-rows"
          data-import-mode="rows"
          aria-controls="user-import-pane-rows"
          aria-pressed="true"
        >{{ _('Fill in fields') }}</button>
        <button
          type="button"
          class="rounded button"
          id="user-import-mode-text"
          data-import-mode="text"
          aria-controls="user-import-pane-text"
          aria-pressed="false"
        >{{ _('Paste text') }}</button>
      </div>
    </div>

    <div class="ui-alert ui-alert--neutral" role="status" aria-live="polite" data-import-summary hidden>
      <div class="ui-alert__title" data-import-summary-title>{{ _('Preview summary') }}</div>
      <div class="ui-alert__body" data-import-summary-body></div>
    </div>

    <div class="ui-alert ui-alert--danger" role="alert" tabindex="-1" data-import-errors hidden>
      <div class="ui-alert__title">{{ _('Some accounts need attention') }}</div>
      <div class="ui-alert__body">
        <p data-import-errors-message>{{ _('Review the issues below and preview again.') }}</p>
        <ul data-import-error-list></ul>
      </div>
    </div>

    <section
      class="ui-stack"
      id="user-import-pane-rows"
      data-import-pane="rows"
      role="region"
      aria-labelledby="user-import-mode-rows"
    >
      <div class="ui-toolbar">
        <div class="ui-toolbar__group">
          <span class="ui-badge ui-badge--neutral" data-user-count>{{ _('1 account') }}</span>
          <label class="manage-user-import-page__password-toggle">
            <input
              type="checkbox"
              class="manage-user-import-page__password-toggle-control"
              data-password-visibility
              aria-controls="user-import-table"
            >
            <span>{{ _('Show passwords') }}</span>
          </label>
        </div>
        <div class="ui-actions">
          <button type="button" class="rounded button" data-add-user-row>{{ _('Add User') }}</button>
        </div>
      </div>

      <div class="ui-table-wrap">
        <table class="data-table" id="user-import-table">
          <caption class="manage-user-import-page__visually-hidden">{{ _('Accounts to import') }}</caption>
          <colgroup>
            <col class="manage-user-import-page__column-index">
            <col class="manage-user-import-page__column-email">
            <col class="manage-user-import-page__column-username">
            <col class="manage-user-import-page__column-password">
            <col class="manage-user-import-page__column-actions">
          </colgroup>
          <thead>
            <tr>
              <th scope="col" class="manage-user-import-page__row-number">{{ _('No.') }}</th>
              <th scope="col">{{ _('Email') }}</th>
              <th scope="col">{{ _('Username') }}</th>
              <th scope="col">{{ _('Password') }}</th>
              <th scope="col" class="manage-user-import-page__actions-cell">{{ _('Operation') }}</th>
            </tr>
          </thead>
          <tbody data-user-rows>
            <tr data-user-row>
              <th
                scope="row"
                class="manage-user-import-page__row-number"
                id="user-import-row-1"
                data-user-row-number
              >1</th>
              <td>
                <div class="ui-field">
                  <label class="ui-field__label manage-user-import-page__visually-hidden" for="user-import-email-1">{{ _('Email') }}</label>
                  <input
                    class="textbox ui-field__control"
                    id="user-import-email-1"
                    name="rowEmail[]"
                    type="email"
                    autocomplete="email"
                    autocapitalize="none"
                    spellcheck="false"
                    required
                    data-user-field="email"
                    aria-describedby="user-import-email-error-1"
                  >
                  <span
                    class="ui-field__error manage-user-import-page__field-error"
                    id="user-import-email-error-1"
                    data-user-error="email"
                    hidden
                  ></span>
                </div>
              </td>
              <td>
                <div class="ui-field">
                  <label class="ui-field__label manage-user-import-page__visually-hidden" for="user-import-username-1">{{ _('Username') }}</label>
                  <input
                    class="textbox ui-field__control"
                    id="user-import-username-1"
                    name="rowUsername[]"
                    type="text"
                    autocomplete="username"
                    autocapitalize="none"
                    spellcheck="false"
                    required
                    data-user-field="username"
                    aria-describedby="user-import-username-error-1"
                  >
                  <span
                    class="ui-field__error manage-user-import-page__field-error"
                    id="user-import-username-error-1"
                    data-user-error="username"
                    hidden
                  ></span>
                </div>
              </td>
              <td>
                <div class="ui-field">
                  <label class="ui-field__label manage-user-import-page__visually-hidden" for="user-import-password-1">{{ _('Password') }}</label>
                  <input
                    class="textbox ui-field__control"
                    id="user-import-password-1"
                    name="rowPassword[]"
                    type="password"
                    autocomplete="new-password"
                    required
                    data-user-field="password"
                    aria-describedby="user-import-password-error-1"
                  >
                  <span
                    class="ui-field__error manage-user-import-page__field-error"
                    id="user-import-password-error-1"
                    data-user-error="password"
                    hidden
                  ></span>
                </div>
              </td>
              <td class="manage-user-import-page__actions-cell">
                <button
                  type="button"
                  class="rounded button compact"
                  data-remove-user-row
                  aria-label="{{ _('Remove account') }}"
                >{{ _('Remove') }}</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    <section
      class="ui-stack ui-hidden"
      id="user-import-pane-text"
      data-import-pane="text"
      role="region"
      aria-labelledby="user-import-mode-text"
      hidden
    >
      {{ form.form_textarea({
          columns:null,
          label:'Users',
          name:'users',
          help_popup:true,
          help_text:_('Field order: email, username, password, display name (optional), JSON data (optional). Separate fields with tabs or commas.'),
          nospellcheck: true
          }) }}
      <pre name="messages"></pre>
    </section>
  </div>

  <footer class="ui-panel__footer">
    <div class="ui-actions">
      <span
        class="manage-user-import-page__visually-hidden"
        role="status"
        aria-live="polite"
        data-import-busy-status
      ></span>
      <button type="button" name="preview" class="rounded button" data-import-action="preview">{{ _('Preview') }}</button>
      <button type="button" name="submit" class="rounded primary button disabled" data-import-action="submit" disabled>{{ _('Submit') }}</button>
    </div>
  </footer>
</section>
{% endblock %}