{% extends 'layout2.html' %}
{% load i18n %}
{% load static %}

{% block css_include %}
{% endblock %}

{% block js_include %}
{% endblock %}


{% block content %}
  
  <section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-control">
                      <a class="btn btn-flat btn-primary" href="{% url 'authentication.openid.edit' %}"><i class="fa fa-plus-circle">&nbsp;</i>{% translate "Add an entry" %}</a>
                    </div>
                    <h1 class="panel-title"><i class="fa fa-sitemap">&nbsp;</i>{% translate "OpenID Repositories" %}</h1>
                </div>
                <div class="panel-body">
                  <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="openid_list">
                  </table>
                </div>
            </div>
        </div>
    </div>
    <!--<i class="fa fa-fw fa-fighter-jet"></i>-->

  </section>

  <textarea id="toCopy" style="display:none;"></textarea>

{% endblock %}

{% block jquery_code %}

  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
  });

  var datatableCanRedraw = true;

  var aoColumns = [
    {
      sTitle: "ID",
      name: "id",
      aTargets: [0],
      defaultContent: "",
      mData: "id",
      bVisible: false
    },
    {
      sTitle: '{% translate "Name" %}',
      name: "name",
      aTargets: [1],
      defaultContent: "",
      mData: "name",
      sClass: "edit"
    },
    {
      sTitle: '{% translate "Provider" %}',
      name: "provider",
      aTargets: [2],
      defaultContent: "",
      mData: "provider",
      sClass: "edit"
    },
    {
      sTitle: '{% translate "Additional infos" %}',
      name: "additional_infos",
      aTargets: [3],
      defaultContent: "",
      mData: "additional_infos",
      mRender: (data, type, row) => {
        let btn_copy = "&nbsp;&nbsp;<a class='btn btn-flat btn-xs btn-default btn-copy-callback-url' data-callback='" + row.callback_url + "' data-toggle='tooltip' data-placement='top' title='Copy callback URL'><img class='clippy' src='/static/img/clippy.svg' alt='Copy to clipboard' width='13'></a>"
        return data + btn_copy
      }
    },
    {
      sTitle: '{% translate "Action" %}',
      mData:"id",
      aTargets: [4],
      defaultContent: "",
      mRender: function(data, type, row) {
        let btn_clone = "<a class='btn btn-flat btn-xs btn-warning' data-toggle='tooltip' data-placement='top' title='Clone' href='/authentication/openid/clone/" + data + "'><i class='fa fa-copy'></i></a>"
        let btn_delete = "<a class='btn btn-flat btn-xs btn-danger' data-toggle='tooltip' data-placement='top' title='Delete' href='/authentication/openid/delete/" + data + "'><i class='fas fa-trash-alt'></i></a>"
        return btn_clone + "&nbsp;" + btn_delete;
      }
    }
  ];

  var openid_table = $("#openid_list").dataTable({
    bServerSide   : true,
    order         : [[1, 'desc']],
    iDisplayLength: 10,
    bProcessing   : true,
    bSort         : true,
    sAjaxSource   : '',
    sServerMethod : 'POST',
    aoColumnDefs: aoColumns,
    language: language_datatable,
    fnServerData  : function(sSource, aoData, fnCallback){

      var columns = [];
      for (var i in aoColumns){
        if( aoColumns[i].bSearchable !== false && aoColumns[i].mData !== null )
          columns.push(aoColumns[i].mData);
      }

      aoData.push({
        name: 'columns',
        value: JSON.stringify(columns)
      });

      $.ajax({
        type   : "POST",
        url    : sSource,
        data   : aoData,
        success: function(data, callback){
          if (!data.status){
            notify('error', "{% translate 'Error' %}", data.error);
          } else {
            fnCallback(data);
          }
        }
      }) // /$.ajax
      .fail( function( jqXHR, textStatus ) {
        notify('error', "{% translate 'Error' %}", jqXHR.responseText);
      }) // /$.fail
      .done( function( data ) {
        if (!data.status){
          notify('error', "{% translate 'Error' %}", data.error);
        } else {
          fnCallback(data);
        }
      }); // /$.done
    }, // /fnServerData

    fnCreatedRow: function(nRow, aData, iDataIndex){

      /* Events binding to edit an openid profile */
      $(nRow).find(".edit").on('click', function(e) {
        if (e.target.tagName !== "TD") return;
        const url = "{% url 'authentication.openid.edit' %}" + aData.id
        /* Open an openid edition in a new tab with ctrl click */
        if (e.ctrlKey || e.metaKey) {
          window.open(url, '_blank');
        } else {
          window.location.href = url;
        }
      }); // /$(nRow).on('click', 'td'

      /* Open an openid edition in a new tab with middle click */
      $(nRow).find(".edit").on('mousedown', function(e){
        if (e.target.tagName === "TD" && e.button === 1) {
          window.open("{% url 'authentication.openid.edit' %}" + aData.id, '_blank');
        }
      }); // /$(nRow).on('mousedown', 'td'

      $(nRow).find('.btn-copy-callback-url').on('click', function(e) {
        e.stopPropagation();
        let html = $(this).html();
        $(this).html("<i class='fa fa-spinner fa-spin'></i>")
        $('#toCopy').val(aData.callback_url);
        $('#toCopy').show();
        toCopy.select();
        document.execCommand('copy');
        $('#toCopy').hide();
        $(this).html(html)
        notify("success", gettext("Success"), gettext("Callback url copied"))
      })
    }, // fnCreatedRow: function

    fnDrawCallback: function(settings){
      datatableCanRedraw = true;
    }, // fnDrawCallback: function

  }); // var openid_table = $("#openid_list").dataTable

  /* Filter datatable only 1s after end of user input */
  $(".dataTables_filter input")
  .off("keyup.DT input.DT")
  .bind("input", (delay(function (e) {
    openid_table.fnFilter($(".dataTables_filter input").val());
  }, 1000)));

  function delay(callback, ms) {
    var timer = 0;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(function () {
        callback.apply(this, arguments);
      }, ms || 0);
    };
  }

  /* Reload table data every 5 seconds if previous one answered */
  setInterval(function(){
    if(datatableCanRedraw == true) {
      datatableCanRedraw = false;
      openid_table.fnDraw(false);
    }
  }, 5000)

{% endblock %}