{% import "components/ui/v1.html" as ui_v1 %}
{% extends "manage_base.html" %}
{% block manage_content %}
<section class="section ui-panel userimport-domain-page" data-userimport-domain>
  <header class="ui-panel__header">
    <h1 class="section__title ui-panel__title" data-heading>{{ _('Import User (Domain + Role)') }}</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="userimport-domain-mode-rows"
          data-import-mode="rows"
          aria-controls="userimport-domain-pane-rows"
          aria-pressed="true"
        >{{ _('Fill in fields') }}</button>
        <button
          type="button"
          class="rounded button"
          id="userimport-domain-mode-text"
          data-import-mode="text"
          aria-controls="userimport-domain-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="userimport-domain-pane-rows"
      data-import-pane="rows"
      role="region"
      aria-labelledby="userimport-domain-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="userimport-domain-page__password-toggle">
            <input
              type="checkbox"
              class="userimport-domain-page__password-toggle-control"
              data-password-visibility
              aria-controls="userimport-domain-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="userimport-domain-table">
          <caption class="userimport-domain-page__visually-hidden">{{ _('Accounts to import') }}</caption>
          <colgroup>
            <col class="userimport-domain-page__column-index">
            <col class="userimport-domain-page__column-email">
            <col class="userimport-domain-page__column-username">
            <col class="userimport-domain-page__column-password">
            <col class="userimport-domain-page__column-domain">
            <col class="userimport-domain-page__column-role">
            <col class="userimport-domain-page__column-actions">
          </colgroup>
          <thead>
            <tr>
              <th scope="col" class="userimport-domain-page__row-number">{{ _('No.') }}</th>
              <th scope="col">{{ _('Email') }}</th>
              <th scope="col">{{ _('Username') }}</th>
              <th scope="col">{{ _('Password') }}</th>
              <th scope="col">{{ _('Domain') }}</th>
              <th scope="col">{{ _('Role') }}</th>
              <th scope="col" class="userimport-domain-page__actions-cell">{{ _('Actions') }}</th>
            </tr>
          </thead>
          <tbody data-user-rows>
            <tr data-user-row>
              <th
                scope="row"
                class="userimport-domain-page__row-number"
                id="userimport-domain-row-1"
                data-user-row-number
              >1</th>
              <td class="userimport-domain-page__field-cell">
                <div class="ui-field">
                  <label class="ui-field__label userimport-domain-page__visually-hidden" for="userimport-domain-email-1">{{ _('Email') }}</label>
                  <input
                    class="textbox ui-field__control"
                    id="userimport-domain-email-1"
                    type="email"
                    autocomplete="email"
                    autocapitalize="none"
                    spellcheck="false"
                    required
                    data-user-field="email"
                    aria-describedby="userimport-domain-email-error-1"
                  >
                  <span
                    class="ui-field__error userimport-domain-page__field-error"
                    id="userimport-domain-email-error-1"
                    data-user-error="email"
                    hidden
                  ></span>
                </div>
              </td>
              <td class="userimport-domain-page__field-cell">
                <div class="ui-field">
                  <label class="ui-field__label userimport-domain-page__visually-hidden" for="userimport-domain-username-1">{{ _('Username') }}</label>
                  <input
                    class="textbox ui-field__control"
                    id="userimport-domain-username-1"
                    type="text"
                    autocomplete="username"
                    autocapitalize="none"
                    spellcheck="false"
                    required
                    data-user-field="username"
                    aria-describedby="userimport-domain-username-error-1"
                  >
                  <span
                    class="ui-field__error userimport-domain-page__field-error"
                    id="userimport-domain-username-error-1"
                    data-user-error="username"
                    hidden
                  ></span>
                </div>
              </td>
              <td class="userimport-domain-page__field-cell">
                <div class="ui-field">
                  <label class="ui-field__label userimport-domain-page__visually-hidden" for="userimport-domain-password-1">{{ _('Password') }}</label>
                  <input
                    class="textbox ui-field__control"
                    id="userimport-domain-password-1"
                    type="password"
                    autocomplete="new-password"
                    required
                    data-user-field="password"
                    aria-describedby="userimport-domain-password-error-1"
                  >
                  <span
                    class="ui-field__error userimport-domain-page__field-error"
                    id="userimport-domain-password-error-1"
                    data-user-error="password"
                    hidden
                  ></span>
                </div>
              </td>
              <td class="userimport-domain-page__field-cell">
                <div class="ui-field">
                  <label class="ui-field__label userimport-domain-page__visually-hidden" for="userimport-domain-domainId-1">{{ _('Domain') }}</label>
                  <select
                    class="select ui-field__control"
                    id="userimport-domain-domainId-1"
                    required
                    data-user-field="domainId"
                    aria-describedby="userimport-domain-domainId-error-1"
                  >
                    <option value="">{{ _('Select a domain') }}</option>
                    {% for domain in domains %}
                      {% set domainId = domain.id or domain._id %}
                      {% set domainName = domain.name or domainId %}
                      <option value="{{ domainId }}">{{ domainName }} ({{ domainId }})</option>
                    {% endfor %}
                  </select>
                  <span
                    class="ui-field__error userimport-domain-page__field-error"
                    id="userimport-domain-domainId-error-1"
                    data-user-error="domainId"
                    hidden
                  ></span>
                </div>
              </td>
              <td class="userimport-domain-page__field-cell">
                <div class="ui-field">
                  <label class="ui-field__label userimport-domain-page__visually-hidden" for="userimport-domain-role-1">{{ _('Role') }}</label>
                  <select
                    class="select ui-field__control"
                    id="userimport-domain-role-1"
                    required
                    disabled
                    data-user-field="role"
                    data-role-control
                    data-select-domain-first="{{ _('Select a domain first') }}"
                    data-no-roles="{{ _('No roles available') }}"
                    aria-describedby="userimport-domain-role-error-1"
                  >
                    <option value="">{{ _('Select a domain first') }}</option>
                  </select>
                  <span
                    class="ui-field__error userimport-domain-page__field-error"
                    id="userimport-domain-role-error-1"
                    data-user-error="role"
                    hidden
                  ></span>
                </div>
              </td>
              <td class="userimport-domain-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="userimport-domain-pane-text"
      data-import-pane="text"
      role="region"
      aria-labelledby="userimport-domain-mode-text"
      hidden
    >
      <div class="ui-grid ui-grid--2">
        <div class="ui-field">
          <label class="ui-field__label" for="userimport-domain-target-domain">{{ _('Domain') }}</label>
          <select
            class="select ui-field__control"
            id="userimport-domain-target-domain"
            required
            data-target-field="targetDomainId"
            aria-describedby="userimport-domain-target-domain-error"
          >
            <option value="">{{ _('Select a domain') }}</option>
            {% for domain in domains %}
              {% set domainId = domain.id or domain._id %}
              {% set domainName = domain.name or domainId %}
              <option value="{{ domainId }}">{{ domainName }} ({{ domainId }})</option>
            {% endfor %}
          </select>
          <span
            class="ui-field__error"
            id="userimport-domain-target-domain-error"
            data-target-error="targetDomainId"
            hidden
          ></span>
        </div>
        <div class="ui-field">
          <label class="ui-field__label" for="userimport-domain-target-role">{{ _('Role') }}</label>
          <select
            class="select ui-field__control"
            id="userimport-domain-target-role"
            required
            disabled
            data-target-field="targetRole"
            data-role-control
            data-select-domain-first="{{ _('Select a domain first') }}"
            data-no-roles="{{ _('No roles available') }}"
            aria-describedby="userimport-domain-target-role-error"
          >
            <option value="">{{ _('Select a domain first') }}</option>
          </select>
          <span
            class="ui-field__error"
            id="userimport-domain-target-role-error"
            data-target-error="targetRole"
            hidden
          ></span>
        </div>
      </div>

      <div class="ui-field">
        <label class="ui-field__label" for="userimport-domain-users">{{ _('Users') }} <span data-ui-help="批量粘贴格式">{{ _('Field order: email, username, password, display name (optional), JSON data (optional). Separate fields with tabs or commas. The selected domain and role apply to every account; use field entry for different domains.') }}</span></label>
        <textarea
          class="textbox ui-field__control"
          id="userimport-domain-users"
          name="users"
          rows="12"
          spellcheck="false"
          aria-describedby="userimport-domain-users-error"
        ></textarea>
        <span
          class="ui-field__error"
          id="userimport-domain-users-error"
          data-target-error="users"
          hidden
        ></span>
      </div>
    </section>

    <div data-role-catalogs hidden>
      {% for domain in domains %}
        {% set domainId = domain.id or domain._id %}
        <select data-role-catalog="{{ domainId }}">
          {% for role in domain.roles %}
            {% set roleId = role.id or role._id or role %}
            {% if roleId != 'guest' %}<option value="{{ roleId }}">{{ roleId }}</option>{% endif %}
          {% endfor %}
        </select>
      {% endfor %}
    </div>
  </div>

  <footer class="ui-panel__footer">
    <div class="ui-actions">
      <span
        class="userimport-domain-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>{{ _('Import') }}</button>
    </div>
  </footer>
</section>
{% endblock %}