<div class="tab-pane fade" id="tab-config-password-settings" role="tabpanel" aria-labelledby="tab-config-password-settings">
  <div class="card mb-4">
    <div class="card-header d-flex fs-5">
      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-password-settings" data-bs-toggle="collapse" aria-controls="collapse-tab-config-password-settings">
        {{ lang.admin.password_settings }}
      </button>
      <span class="d-none d-md-block">{{ lang.admin.password_settings }}</span>
    </div>
    <div id="collapse-tab-config-password-settings" class="card-body collapse" data-bs-parent="#admin-content">
      <form class="form-horizontal" data-id="passwordpolicy" role="form" method="post">
        <div class="row">
          <div class="col-sm-12">
            <legend>
              {{ lang.admin.password_policy }}
            </legend>
            <hr />
          </div>
        </div>
        {% for name, value in password_complexity %}
          {% if name == 'length' %}
            <div class="row mb-4">
              <label class="control-label col-sm-3 text-sm-end" for="length">{{ lang.admin.password_length }}:</label>
              <div class="col-sm-2">
                <input type="number" class="form-control" min="3" max="64" name="length" id="length" value="{{ value }}" required>
              </div>
            </div>
          {% else %}
            <input type="hidden" name="{{ name }}" value="0">
            <div class="row mb-2">
              <div class="offset-sm-3 col-sm-9">
                <label>
                  <input type="checkbox" class="form-check-input" name="{{ name }}" id="{{ name }}" value="1" {% if value == 1 %}checked{% endif %}> {{ lang.admin['password_policy_'~name] }}
                </label>
              </div>
            </div>
          {% endif %}
        {% endfor %}
        <div class="row mt-4 mb-2">
          <div class="offset-sm-3 col-sm-9">
            <div class="btn-group">
              <button class="btn btn-sm d-block d-sm-inline btn-success" data-item="passwordpolicy" data-action="edit_selected" data-id="passwordpolicy" data-api-url='edit/passwordpolicy' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
            </div>
          </div>
        </div>
      </form>

      <form class="form" role="form" data-id="pw_reset_notification" method="post" style="margin-top: 50px;">
        <div class="row">
          <div class="col-sm-12">
            <legend>
              {{ lang.admin.password_reset_settings }}
            </legend>
            <hr />
            <small>{{ lang.admin.reset_password_vars|raw }}</small><br><br>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-sm-6">
            <div>
              <label for="pw_reset_from">{{ lang.admin.quota_notification_sender }}:</label>
              <input type="email" class="form-control" id="pw_reset_from" name="from" value="{{ pw_reset_data.from }}">
            </div>
          </div>
          <div class="col-sm-6">
            <div>
              <label for="pw_reset_subject">{{ lang.admin.quota_notification_subject }}:</label>
              <input type="text" class="form-control" id="pw_reset_subject" name="subject" value="{{ pw_reset_data.subject }}">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12" data-bs-target="#text_template" style="cursor:pointer" unselectable="on" data-bs-toggle="collapse">
            <span class="d-block"><i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.password_reset_tmpl_text }}</span>
            <small>{{ lang.admin.restore_template }}</small>
          </div>
          <div id="text_template" class="col-12 collapse">
            <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code mb-2" rows="20" name="text_tmpl">{{ pw_reset_data.text_tmpl|raw }}</textarea>
          </div>
          <div class="col-12 mt-3" data-bs-target="#html_template" style="cursor:pointer" unselectable="on" data-bs-toggle="collapse">
            <span class="d-block"><i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.password_reset_tmpl_html }}</span>
            <small>{{ lang.admin.restore_template }}</small>
          </div>
          <div id="html_template" class="col-12 collapse">
            <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code" rows="20" name="html_tmpl">{{ pw_reset_data.html_tmpl|raw }}</textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-10">
            <div>
              <br>
              <a type="button" class="btn btn-sm d-block d-sm-inline btn-success" data-action="edit_selected"
                 data-item="pw_reset_notification"
                 data-id="pw_reset_notification"
                 data-api-url='edit/reset-password-notification'
                 data-api-attr='{}'><i class="bi bi-check-lg"></i> {{ lang.user.save_changes }}</a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
