<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>{{ mt._('admin.menu.admin') }}</h2>
        <div class="clearfix"></div>
      </div>

      <div class="x_content">

        <div class="row mt-10x">
          <div class="col-md-4 col-sm-4 col-xs-12"></div>
          <div class="col-md-4 col-sm-4 col-xs-12 text-center">
            <button type="button" class="btn btn-primary waves-effect waves-light m-0 w-30" data-toggle="modal" data-target=".modal-add-admin">{{ mt._('_common.add') }}</button>
          </div>
        </div>

        {% if admins is defined and admins|length > 0 %}
        <div class="row py-25x">
          <div class="col-md-4"></div>
          <div class="col-md-4">

            <table id="table-admins" class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>{{ mt._('admin.username') }}</th>
                  <th></th>
                </tr>
              </thead>

              <tbody>
                {% for el in admins %}
                <tr id="{{ el.id }}" data-username="{{ el.username }}">
                  <td class="username"><span>{{ el.username }} (id: {{ el.id }})</span></td>
                  <td class="center" style="vertical-align:middle">
                    <span data-toggle='modal' data-target='.modal-edit-admin'>
                      <a href="#" class="edit-admin" title="{{ mt._('_common.edit') }}">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                      </a>
                    </span>
                    {% if canDelete %}
                    <span class="pl-20x" data-toggle='modal' data-target='.modal-delete-admin'>
                      <a href="#" class="delete-admin" title="{{ mt._('_common.delete') }}">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                      </a>
                    </span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>

          </div>
        </div>
        {% endif %}

      </div>

    </div>
  </div>
</div>

<!-- Modal for add admin -->
<div class="modal fade modal-add-admin" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm w-50">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">{{ mt._('_common.add') }}</h4>
        <div class="modal-close" data-dismiss="modal">{{ image("img/assets/times.png", "class": "m-0-auto pointer", "alt": mt._('_common.close')) }}</div>
      </div>
      <div class="modal-body">
        <div class="modal-section">
          <div class="row py-10x">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right mt-10x'>{{ mt._('admin.username') }}</div>
            <div class='col-md-4 col-sm-4 col-xs-4'><input type="text" class="form-control" id="add-admin-username" name="add-admin-username" autocomplete="new-username"/></div>
          </div>
          <div class="row pb-10x">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right mt-10x'>{{ mt._('session.register.password') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8'><input type="password" class="form-control" id="add-admin-new-password" name="add-admin-new-password" autocomplete="new-password"/></div>
          </div>
          <div class="row">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right mt-10x'>{{ mt._('session.register.confirmpassword') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8'><input type="password" class="form-control" id="add-admin-rpt-password" name="add-admin-rpt-password" autocomplete="new-rpt-password"/></div>
          </div>
          <div class="row pb-10x">
            <div class='col-md-4 col-sm-4 col-xs-4'></div>
            <div class='col-md-8 col-sm-8 col-xs-8 msg-error text-left'>{{ mt._('session.register.errorconfirm') }}</div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-default left-btn w-50" data-dismiss="modal">{{ mt._('_common.close') }}</button>
          </div>
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-primary right-btn w-50" id="add-admin" disabled>{{ mt._('_common.add') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal for edit admin -->
<div class="modal fade modal-edit-admin" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm w-50">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">{{ mt._('_common.edit') }}</h4>
        <div class="modal-close" data-dismiss="modal">{{ image("img/assets/times.png", "class": "m-0-auto pointer", "alt": mt._('_common.close')) }}</div>
      </div>
      <div class="modal-body">
        <div class="modal-section">
          <input type="hidden" id="edit-admin-id" name="edit-admin-id"/>
          <div class="row py-10x">
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right mt-10x'>{{ mt._('admin.username') }}</div>
            <div class='col-md-4 col-sm-4 col-xs-4'><input type="text" class="form-control" id="edit-admin-username" name="edit-admin-username" autocomplete="new-username"/></div>
            <div class='col-md-4 col-sm-4 col-xs-4 modal-edit-password-box'>
              <label class='checkbox-container' style='margin-top:5px'>
                <input type='checkbox' name='edit-admin-edit-password' id='edit-admin-edit-password' checked /> {{ mt._('admin.dontmodifypassword') }}
                <span class='checkbox-checkmark'></span>
              </label>
            </div>
          </div>
          <div class="row pb-10x modal-password-box" style='display:none'>
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right mt-10x'>{{ mt._('session.register.password') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8'><input type="password" class="form-control" id="edit-admin-new-password" name="edit-admin-new-password" autocomplete="new-password"/></div>
          </div>
          <div class="row modal-password-box" style='display:none'>
            <div class='col-md-4 col-sm-4 col-xs-4 modal-section-title right mt-10x'>{{ mt._('session.register.confirmpassword') }}</div>
            <div class='col-md-8 col-sm-8 col-xs-8'><input type="password" class="form-control" id="edit-admin-rpt-password" name="edit-admin-rpt-password" autocomplete="new-rpt-password"/></div>
          </div>
          <div class="row pb-10x modal-password-box" style='display:none'>
            <div class='col-md-4 col-sm-4 col-xs-4'></div>
            <div class='col-md-8 col-sm-8 col-xs-8 msg-error text-left'>{{ mt._('session.register.errorconfirm') }}</div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-default left-btn w-50" data-dismiss="modal">{{ mt._('_common.close') }}</button>
          </div>
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-primary right-btn w-50" id="edit-admin">{{ mt._('_common.edit') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal for delete admin -->
<div class="modal fade modal-delete-admin" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm w-30">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ mt._('_common.delete') }}</h4>
        <div class="modal-close" data-dismiss="modal">{{ image("img/assets/times.png", "class": "m-0-auto pointer", "alt": mt._('_common.close')) }}</div>
      </div>
      <div class="modal-body">
        <input type="hidden" id="delete-admin-id" name="delete-admin-id"/>
        <div class="row center"><div class='col-md-12 modal-section-title'>{{ mt._('admin.admin.deletewarning') }}</div></div>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-default left-btn w-50" data-dismiss="modal">{{ mt._('_common.close') }}</button>
          </div>
          <div class="col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-primary right-btn w-50 capitalize" id="delete-admin" data-action="">{{ mt._('_common.delete') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
