{% extends '../layout/admin.html' %}

{% block html_title %}{{ customTitle(t('Import Data')) }}{% endblock %}

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

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

  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'importer'} %}
    </div>
    <div class="col-lg-7 col-md-9">

      <!-- Flash message for success -->
      {% set smessage = req.flash('successMessage') %}
      {% if smessage.length %}
      <div class="alert alert-success">
        {% for e in smessage %}
          {{ e }}<br>
        {% endfor %}
      </div>
      {% endif %}

      <!-- Flash message for error -->
      {% set emessage = req.flash('errorMessage') %}
      {% if emessage.length %}
      <div class="alert alert-danger">
        {% for e in emessage %}
        {{ e }}<br>
        {% endfor %}
      </div>
      {% endif %}

      <!-- esa Importer management forms -->
      <form action="/_api/admin/settings/importerEsa" method="post" class="form-horizontal" id="importerSettingFormEsa" role="form"
          data-success-messaage="{{ ('Updated') }}">
        <fieldset>
          <legend>{{ t('importer_management.import_from', 'esa.io') }}</legend>
          <table class="table table-bordered table-mapping">
            <thead>
              <tr>
                <th width="45%">esa.io</th>
                <th width="10%"></th>
                <th>GROWI</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>{{ t('Article') }}</th>
                <th><i class="icon-arrow-right-circle text-success"></i></th>
                <th>{{ t('Page') }}</th>
              </tr>
              <tr>
                <th>{{ t('Category') }}</th>
                <th><i class="icon-arrow-right-circle text-success"></i></th>
                <th>{{ t('Page Path') }}</th>
              </tr>
              <tr>
                <th>{{ t('User') }}</th>
                <th></th>
                <th>(TBD)</th>
              </tr>
            </tbody>
          </table>
          <div class="well well-sm mb-0 small">
            <ul>
              <li>{{ t("importer_management.page_skip") }}</li>
            </ul>
          </div>
          <div class="form-group">
            <input type="password" name="dummypass" style="display:none; top: -100px; left: -100px;" />
          </div>
          <div class="form-group">
            <label for="settingForm[importer:esa:team_name]" class="col-xs-3 control-label">{{ t('importer_management.esa_settings.team_name') }}</label>
            <div class="col-xs-6">
              <input class="form-control" type="text" name="settingForm[importer:esa:team_name]" value="{{ settingForm['importer:esa:team_name'] | default('') }}">
            </div>
          </div>
          <div class="form-group">
            <label for="settingForm[importer:esa:access_token]" class="col-xs-3 control-label">{{ t('importer_management.esa_settings.access_token') }}</label>
            <div class="col-xs-6">
              <input class="form-control" type="password" name="settingForm[importer:esa:access_token]" value="{{ settingForm['importer:esa:access_token'] | default('') }}">
            </div>
          </div>
          <div class="form-group">
            <input type="hidden" name="_csrf" value="{{ csrf() }}" />
            <div class="col-xs-offset-3 col-xs-6">
              <button id="testConnectionToEsa" type="button" class="btn btn-primary btn-esa" data-action="/_api/admin/import/esa" name="Esa"
                  data-success-message="Import posts from esa success." data-error-message="Error occurred in importing pages from esa.io">
                {{ t("importer_management.import") }}
              </button>
              <button type="submit" class="btn btn-secondary">{# the first element is the default button to submit #}
                {{ t('Update') }}
              </button>
              <span class="col-xs-offset-1">
                <button id="importFromEsa" type="button" class="btn btn-default btn-esa" data-action="/_api/admin/import/testEsaAPI" name="Esa"
                    data-success-message="Test connection to esa success." data-error-message="Test connection to esa failed.">
                  {{ t("importer_management.esa_settings.test_connection") }}
                </button>
              </span>
            </div>
          </div>
        </fieldset>
      </form>


      <!-- qiita:team Importer management forms -->
      <form action="/_api/admin/settings/importerQiita" method="post" class="form-horizontal mt-5" id="importerSettingFormQiita" role="form"
          data-success-messaage="Updated">
        <fieldset>
          <legend>{{ t('importer_management.import_from', 'Qiita:Team') }}</legend>
          <table class="table table-bordered table-mapping">
            <thead>
              <tr>
                <th width="45%">Qiita:Team</th>
                <th width="10%"></th>
                <th>GROWI</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>{{ t('Article') }}</th>
                <th><i class="icon-arrow-right-circle text-success"></i></th>
                <th>{{ t('Page') }}</th>
              </tr>
              <tr>
                <th>{{ t('Tag')}}</th>
                <th></th>
                <th>-</th>
              </tr>
              <tr>
                <th>{{ t("importer_management.Directory_hierarchy_tag") }}</th>
                <th></th>
                <th>(TBD)</th>
              </tr>
              <tr>
                <th>{{ t('User') }}</th>
                <th></th>
                <th>(TBD)</th>
              </tr>
            </tbody>
          </table>
          <div class="well well-sm mb-0 small">
            <ul>
              <li>{{ t("importer_management.page_skip") }}</li>
            </ul>
          </div>
          <div class="form-group">
            <input type="password" name="dummypass" style="display: none; top: -100px; left: -100px;" />
          </div>
          <div class="form-group">
            <label for="settingForm[importer:qiita:team_name]" class="col-xs-3 control-label">{{ t('importer_management.qiita_settings.team_name') }}</label>
            <div class="col-xs-6">
              <input class="form-control" type="text" name="settingForm[importer:qiita:team_name]" value="{{ settingForm['importer:qiita:team_name'] | default('') }}">
            </div>
          </div>
          <div class="form-group">
            <label for="settingForm[importer:qiita:access_token]" class="col-xs-3 control-label">{{ t('importer_management.qiita_settings.access_token') }}</label>
            <div class="col-xs-6">
              <input class="form-control" type="password" name="settingForm[importer:qiita:access_token]" value="{{ settingForm['importer:qiita:access_token'] | default('') }}">
            </div>
          </div>
          <div class="form-group">
            <input type="hidden" name="_csrf" value="{{ csrf() }}" />
            <div class="col-xs-offset-3 col-xs-6">
              <button id="testConnectionToQiita" type="button" class="btn btn-primary btn-qiita" data-action="/_api/admin/import/qiita" name="Qiita"
                  data-success-message="Import posts from qiita:team success." data-error-message="Error occurred in importing pages from qiita:team">
                {{ t("importer_management.import") }}
              </button>
              <button type="submit" class="btn btn-secondary">{# the first element is the default button to submit #}
                {{ t('Update') }}
              </button>
              <span class="col-xs-offset-1">
                <button id="importFromQiita" type="button" class="btn btn-default btn-qiita" data-action="/_api/admin/import/testQiitaAPI" name="Qiita"
                    data-success-message="Test connection to qiita:team success." data-error-message="Test connection to qiita:team failed.">
                  {{ t("importer_management.qiita_settings.test_connection") }}
                </button>
              </span>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

</div>

<script>
  /**
   * show flash message
   */
  function showMessage(formId, msg, status) {
    $('#' + formId + ' .alert').remove();

    if (!status) {
      status = 'success';
    }
    var $message = $('<p class="alert"></p>');
    $message.addClass('alert-' + status);
    $message.html(msg.replace(/\n/g, '<br>'));
    $message.insertAfter('#' + formId + ' legend');

    if (status == 'success') {
      setTimeout(function()
      {
        $message.fadeOut({
          complete: function() {
            $message.remove();
          }
        });
      }, 5000);
    }
  }

  /**
   * Post form data and process UI
   */
  function postData(form, button, action, success_msg = "Success", error_msg = " {{ t('Error occurred') }} " ) {
    var id = form.attr('id');
    button.attr('disabled', 'disabled');
    var jqxhr = $.post(action, form.serialize(), function(data)
      {
        if (!data.status) {
          showMessage(id, `${error_msg} ${data.message}`, 'danger');
        }
        else {
          showMessage(id, success_msg);
        }
      })
      .fail(function() {
        showMessage(id, "{{ t('Error occurred') }}", 'danger');
      })
      .always(function() {
        button.prop('disabled', false);
      });
    return false;
  }

  /**
   * Handle button esa
   */
  $('.btn-esa, .btn-qiita').each(function() {
    var $form = $('#importerSettingForm' + $(this).attr('name'));
    var $button = $(this);
    var $action = $button.attr('data-action');
    var $success_msg = $button.attr('data-success-message');
    var $error_msg = $button.attr('data-error-message');
    $button.click(function() { return postData($form, $button, $action, $success_msg, $error_msg) });
  });

  /**
   * Handle submit button esa
   */
  $('#importerSettingFormEsa, #importerSettingFormQiita').each(function() {
    var $form = $(this);
    var $button = $("#importerSettingForm" + $(this).attr('name') + " button[type='submit']");
    var $action = $form.attr('action');
    var $success_msg = $button.attr('data-success-message');
    var $error_msg = $button.attr('data-error-message');
    $form.submit(function() { return postData($form, $button, $action, $success_msg, $error_msg) });
  });

</script>

{% endblock content_main %}

{% block content_footer %}
{% endblock content_footer %}