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

{% block css_include %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/datatables.min.css' %}">
{% endblock %}

{% block js_include %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.js' %}"></script>
{% endblock %}


{% block content %}

  <section class="content">
    <div class="row">
        <div class="col-md-12">
          <div class="panel">
            <div class="panel-heading">
              <h1 class="panel-title"><i class="fa fa-sitemap">&nbsp;</i>{% translate "Portal Templates" %}</h1>
            </div>
            <div class="panel-body">
              <div class="nav-tabs-custom nav-tabs-no-margin">
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab_template" data-toggle="tab">{% translate "Templates" %}</a></li>
                  <li><a href="#tab_image" data-toggle="tab">{% translate "Images" %}</a></li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane active" id="tab_template">
                    <div class="panel">
                        <div class="panel-heading">
                            <div class="panel-control">
                              <a class="btn btn-flat btn-primary" href="{% url 'portal.template.edit' %}"><i class="fa fa-plus-circle">&nbsp;</i>{% translate "Add an entry" %}</a>
                            </div>
                        </div>
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="portal_template_list"></table>
                            </div>
                          </div>
                        </div>
                    </div>
                  </div>

                  <div class="tab-pane" id="tab_image">
                    <div class="panel">
                        <div class="panel-heading">
                            <div class="panel-control">
                              <a class="btn btn-flat btn-primary" href="{% url 'portal.image.edit' %}"><i class="fa fa-plus-circle">&nbsp;</i>{% translate "Add an entry" %}</a>
                            </div>
                        </div>
                        <div class="panel-body">
                          <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="image_list">
                            <thead>
                              <tr>
                                <th>{% translate "Preview" %}</th>
                                <th>{% translate "Name" %}</th>
                                <th>{% translate "Action" %}</th>
                              </tr>
                            </thead>
                            <tbody>
                            </tbody>
                          </table>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
    <!--<i class="fa fa-fw fa-fighter-jet"></i>-->

  </section>

{% endblock %}

{% block jquery_code %}

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

  let portal_template_clone_uri = "{% url 'portal.template.clone' %}";

  var aoColumns = [
    {
      sTitle: "ID",
      name: "id",
      aTargets: [0],
      defaultContent: "",
      mData: "id",
      bVisible: false,
    },
    {
      sTitle: '{% translate "Name" %}',
      name: "name",
      aTargets: [1],
      defaultContent: "",
      mData: "name",
      sWidth: "90%",
    },
    {
      sTitle: '{% translate "Action" %}',
      mData:"id",
      aTargets: [2],
      defaultContent: "",
      sWidth: "10%",
      mRender: function(data, type, row) {
        result = '<a class="btn btn-flat btn-xs btn-primary btn-clone" data-toggle="tooltip" data-placement="top" title="{% translate 'Copy' %}"><span><i class="fa fa-copy"></i></span></a>&nbsp;';
        if( !row.internal ) {
          result += '<a class="btn btn-flat btn-xs btn-danger" data-toggle="tooltip" data-placement="top" title="Delete" href="/portal/template/delete/' + data + '"><span><i class="fas fa-trash-alt"></i></span></a>';
        }
        return result;
      }
    }
  ];

  var portail_template_table = $("#portal_template_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 start a reputation_ctx */

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

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

      $(nRow).find('.btn-clone').on('click', function(e) {
        e.stopPropagation();
        let txt = $(this).html()
        $(this).html("<i class='fa fa-spinner fa-spin'></i>")
        $(this).prop('disabled', true)
        let id = aData['id'];

        axios.post(portal_template_clone_uri, {pk: id})
          .then((response) => {
            notify('success', gettext('Success'), gettext("Authentication ACL cloned"))
            portail_template_table.DataTable().fnDraw();
          })
          .then(() => {
            $(this).html(txt)
            $(this).prop('disabled', false)
          })
      })


    } // fnCreatedRow: function
  });


  $('#image_list').DataTable({
    language: language_datatable,
    "autoWidth": false,
    "order": [[1, 'asc']],
    "aoColumns": [
        {'mData': 'preview', sWidth: "85%", 'name': 'preview', 'aTargets': [0], 'bSortable': false, 'mRender': function(data, type, row){
          return "<img src='" + data + "' style='width:100px; height:auto;' />";
        }},
        {'mData': 'name', sWidth: "10%", 'name': 'name', 'aTargets': [1]},
        {'mData': 'name', sWidth: "5%", 'name': 'action', 'aTargets': [2], 'bSortable': false, mRender: function(data, type, row) {
          return  `<a class="btn btn-xs btn-danger" href="/portal/images/delete/${row.id}"><span><i class="fa fa-trash"></i></span></a>`
        }},
    ],

    fnCreatedRow: function(nRow, aData) {
      /* Events binding to edit a portal image */
      $(nRow).on('click', 'td', function(e) {
        if (e.target.tagName !== "TD") return;
        const url = "{% url 'portal.image.edit' %}" + aData.id
        /* Open a portal image 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 a portal image edition in a new tab with middle click */
      $(nRow).on('mousedown', 'td', function(e){
        if (e.target.tagName === "TD" && e.button === 1) {
          window.open("{% url 'portal.image.edit' %}" + aData.id, '_blank');
        }
      }); // /$(nRow).on('mousedown', 'td'
    }
});

axios.get("/api/v1/portal/images/")
  .then((response) => {
    for (let image of response.data.res) {
      console.log(image)
      let data = {
        id: image.id,
        preview: image.create_preview_html,
        name: image.name,
      }

      $('#image_list').dataTable().fnAddData(data)
    }
  })

{% endblock %}