{% extends 'gui2/base.html' %}
{% load dashboard_tags %}
{% load crispy_forms_tags %}
{% load humanize %}
{% load fontawesome %}
{% load control %}
{% load static %}
<!-- ============================= Address Bar Start =============================== -->
{% block breadcrumbs %}
<div id="address_content" style="display: none">
    <ol class="breadcrumb" aria-label="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'dashboard:home' %}">Enrich</a></li>
        <li class="breadcrumb-item"><a href="{% url 'dashboard:index' %}">Usecases</a></li>
        <li class="breadcrumb-item"><a href="{% url 'dashboard:usecase_detail' usecase.org.name %}">{{usecase.org.name}}</a></li>
        <li class="breadcrumb-item"><a href="{% url basenamespace|add:':index' %}">{{spec.name}}</a></li>
	<li class="breadcrumb-item"><a href="{% url basenamespace|add:':policy_index' %}">Configurations</a></li>
	<li class="breadcrumb-item active">Select Dataset</li>
    </ol>
</div>

{% with knowledge="{{app.name}} policy" %}{{ block.super }}{% endwith %}
{% endblock breadcrumbs %}
<!-- ============================= Address Bar End =============================== -->
{% block nav_index%}
<!--Header tab name-->
    {% with nav_data="usecases" %}{{ block.super }}{% endwith %}
{% endblock %}
<!--============================= Help Content =============================== -->
{% block help %}
<div id="page_help_content" style="visibility: hidden">
  Select dataset for defining a configuration
</div>
{{block.super}}
{% endblock %}

{% block customhead %}
<style>
    .pvg-inner {width: calc(100% + 40px);}
</style>
{% endblock %}
<!--============================= Help Content End =============================== -->
{% block content %}

<div class="container mb-30">
  <div class="row">
    <div class="col-md-12">
      <div class="row align-items-center">
        <div class="col-md-6">
          <div class="ptaa-box">
            <div class="ptaa-icon">{% fontawesome_icon app.icon %}</div>
            <div class="ptaa-content">
              <h1>Select Dataset for New Configuration </h1>
              <p>For Specification: {{spec.name}}</p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="d-flex justify-content-end">
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="filter-container d-flex align-items-center ">
    <div class="filter-box d-flex align-items-center">
      <div class="search-box ml-0 mr-3">
        <input type="text" class="search-input" id="dataset_search" value="" placeholder="Search"/>
      </div>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-condensed" id="dataset_table">
      <thead>
        <tr>
          <th>NAME</th>
          <th>DESCRIPTION</th>
          <th>CREATED</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for source in sources %}
        <tr>
	  <td width="15%"><strong class="mt-3">{{source.name}} ({{source.version}})</strong></td>
          <td width="15%">{{source.description}}</td>
          <td width="15%">{{source.tags.computed}}</td>
	  <td width="5%">
	    <a class="btn btn-sm btn-primary"
	       href="{% url basenamespace|add:':policy_select_columns' %}?source_id={{source.id}}&source_version={{source.version}}">SELECT</a>
	  </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>

$(document).ready(function() {
    $.fn.dataTable.ext.classes.sPageButton = 'paginate_link';
    var table = $('#dataset_table').DataTable({
        "searching": true,
        "ordering": true,
        "paging": true,
        "info": false,
        "bLengthChange": true,
        "order": [
            [2, "desc"]
        ],
        'processing': true,
          "columnDefs": [],
          "language": {
             "paginate": {
             "first": "<img src=\"{% static 'gui2/images/show-first-button.svg' %}\" alt=\"\" />",
             "last": "<img src=\"{% static 'gui2/images/show-last-button.svg' %}\" alt=\"\" />",
             "next": "<i class='fas fa-chevron-right'>",
              "previous": "<i class='fas fa-chevron-left'>"
             }
          },
        "dom": "<<t><\"table-bottom\"ilp>>",
    });

    $("#dataset_search").on('keyup', function () {
        $('#dataset_table').dataTable().fnFilter(this.value);
    });
});
</script>
{% endblock %}
