{% extends '../layout-growi/base/layout.html' %}

{% block html_title %}{{ customTitle(t('user_management.external_account')) }}{% endblock %}

{% block content_header %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">{{ t('user_management.external_account') }}</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main">

  <ul class="nav nav-tabs">
    <li><a href="/me"><i class="icon-user"></i> {{ t('User Information') }}</a></li>
    <li class="active"><a href="/me/external-accounts"><i class="icon-share-alt"></i> {{ t('External Accounts') }}</a></li>
    <li><a href="/me/password"><i class="icon-lock"></i> {{ t('Password Settings') }}</a></li>
    <li><a href="/me/apiToken"><i class="icon-paper-plane"></i> {{ t('API Settings') }}</a></li>
  </ul>

  <div class="tab-content">

  {% set couldntDisassociateError = req.flash('couldntDisassociateError') %}
  {% if couldntDisassociateError != null %}
  <div class="alert alert-danger m-t-10">
    <b>Couldn't disassociate External Account</b><br>
    You have not set a password and have only one External Account.
  </div>
  {% endif %}

  {% set error = req.flash('errorMessage') %}
  {% if error.length %}
  {% for e in error %}
  <div class="alert alert-danger m-t-10">
    <b>Server Error occured:</b><br>
    {{ e }}
  </div>
  {% endfor %}
  {% endif %}

  {% set warn = req.flash('warningMessage') %}
  {% if warn.length %}
  {% for w in warn %}
  <div class="alert alert-warning m-t-10">
    {{ w }}
  </div>
  {% endfor %}
  {% endif %}

  {% set message = req.flash('successMessage') %}
  {% if message.length %}
  <div class="alert alert-success m-t-10">
    <b>{{ message }}</b>
  </div>
  {% endif %}



  <legend class="m-t-20" style="line-height: 1.7em;">
    <button class="btn btn-default btn-sm pull-right" data-target="#create-external-account" data-toggle="modal">
      <i class="icon-plus" aria-hidden="true"></i>
      Add
    </button>
    {{ t('External Accounts') }}
  </legend>

  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered table-user-list">
        <thead>
          <tr>
            <th width="120px">Authentication Provider</th>
            <th>
              <code>accountId</code>
            </th>
            <th width="200px">{{ t('Created') }}</th>
            <th width="150px">{{ t('Admin') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for account in externalAccounts %}
          <tr>
            <td>{{ account.providerType }}</td>
            <td>
              <strong>{{ account.accountId }}</strong>
            </td>
            <td>{{ account.createdAt|date('Y-m-d', account.createdAt.getTimezoneOffset()) }}</td>
            <td class="text-center">
              <button class="btn btn-default btn-sm btn-danger"
                  data-toggle="modal" data-target="#diassociate-external-account" data-provider-type="{{ account.providerType }}" data-account-id="{{ account.accountId }}">
                <i class="ti-unlink"></i>
                {{ t('Diassociate') }}
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {# modal #}
  <style>
    .modal.create-external-account .modal-dialog {
      width: 750px;
    }
  </style>
  <div class="modal create-external-account" id="create-external-account">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header bg-info">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <div class="modal-title">{{ t('Create External Account') }}</div>
        </div>

        <div class="modal-body">

          <ul class="nav nav-tabs passport-settings" role="tablist">
            <li class="active">
              <a href="#passport-ldap" data-toggle="tab" role="tab"><i class="fa fa-sitemap"></i> LDAP</a>
            </li>
            <li class="tbd">
              <a href="#passport-github" data-toggle="tab" role="tab"><i class="fa fa-github"></i> (TBD) GitHub</a>
            </li>
            <li class="tbd">
              <a href="#passport-google-oauth" data-toggle="tab" role="tab"><i class="fa fa-google"></i> (TBD) Google OAuth</a>
            </li>
            <li class="tbd">
              <a href="#passport-facebook" data-toggle="tab" role="tab"><i class="fa fa-facebook"></i> (TBD) Facebook</a>
            </li>
            <li class="tbd">
              <a href="#passport-twitter" data-toggle="tab" role="tab"><i class="fa fa-twitter"></i> (TBD) Twitter</a>
            </li>
          </ul>

          <div class="tab-content passport-settings m-t-15">
            <div id="passport-ldap" class="tab-pane active" role="tabpanel" >
              <div id="formLdapAssociationContainer">
                {% include '../widget/passport/ldap-association-tester.html' %}
                <div class="clearfix">
                  <button type="button" class="btn btn-info pull-right" onclick="associateLdap()">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                    {{ t('Add') }}
                  </button>
                </div>
              </div>
            </div>

            <div id="passport-google-oauth" class="tab-pane" role="tabpanel">
              (TBD)
            </div>

            <div id="passport-github" class="tab-pane" role="tabpanel">
              (TBD)
            </div>

            <div id="passport-facebook" class="tab-pane" role="tabpanel">
              (TBD)
            </div>

            <div id="passport-twitter" class="tab-pane" role="tabpanel">
              (TBD)
            </div>

          </div><!-- /.tab-content -->

        </div><!-- /.modal-body -->

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

    <script>
      /**
       * associate (submit the form)
       */
      function associateLdap() {
        var $form = $('#formLdapAssociationContainer > form');
        var $action = '/me/external-accounts/associateLdap';
        $form.attr('action', $action);
        $form.submit();
      }
    </script>

  </div><!-- /.modal -->

  <div class="modal diassociate-external-account" id="diassociate-external-account">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <div class="modal-title">{{ t('Diassociate External Account') }}</div>
        </div>

        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <p><b>
                Are you sure to diassociate the
                <span class="diassociate-provider-type"></span> account
                <code class="diassociate-account-id"></code>?
              </b></p>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <form action="/me/external-accounts/disassociate" method="post">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <input type="hidden" name="providerType">
            <input type="hidden" name="accountId">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">
              {{ t('Cancel') }}
            </button>
            <button type="submit" class="btn btn-sm btn-danger">
              <i class="ti-unlink"></i>
              {{ t('Diassociate') }}
            </button>
          </form>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

    <script>
      $('#diassociate-external-account').on('show.bs.modal', function (event) {
        var modal = $(this);
        var button = $(event.relatedTarget); // Button that triggered the modal
        // get data-*
        var providerType = button.data('provider-type');
        var accountId = button.data('account-id');
        // set labels
        modal.find('.diassociate-provider-type').text(providerType);
        modal.find('.diassociate-account-id').text(accountId);
        // set hidden inputs
        modal.find('input:hidden[name="providerType"]').val(providerType);
        modal.find('input:hidden[name="accountId"]').val(accountId);
      })
    </script>
  </div><!-- /.modal -->

</div>
{% endblock content_main %}

{% block content_footer %}
{% endblock %}

{% block layout_footer %}
{% endblock %}