{%extends "phenotypes/base.html"%}
{%from "flash_messages.html" import flash_all_messages%}

{%block title%}Phenotypes{%endblock%}

{%block pagetitle%}Delete Phenotypes{%endblock%}

{%block lvl4_breadcrumbs%}
<li {%if activelink=="view-dataset"%}
    class="breadcrumb-item active"
    {%else%}
    class="breadcrumb-item"
    {%endif%}>
  <a href="{{url_for('species.populations.phenotypes.view_dataset',
           species_id=species.SpeciesId,
           population_id=population.Id,
           dataset_id=dataset.Id)}}">View</a>
</li>
{%endblock%}

{%block contents%}
{{flash_all_messages()}}

<div class="row"><h2>Delete Phenotypes</h2></div>

{%if phenotypes | length > 0%}
<div class="row">
  <p>You have requested to delete the following phenotypes:</p>
</div>

<div class="row">
  <div class="col">
    <a id="btn-select-all-phenotypes"
       href="#"
       class="btn btn-info"
       title="Select all phenotypes">select all</a>
  </div>
  <div class="col">
    <a id="btn-deselect-all-phenotypes"
       href="#"
       class="btn btn-warning"
       title="Deselect all phenotypes">deselect all</a>
  </div>
</div>

<div class="row">
  <table id="tbl-delete-phenotypes" class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Record ID</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      {%for phenotype in phenotypes%}
      <tr>
        <td>
          <input id="chk-xref-id-{{phenotype}}"
                 name="xref_ids"
                 type="checkbox"
                 class="chk-row-select" />
        </td>
        <td>{{phenotype}}</td>
        <td>{{phenotype}} — Description</td>
      </tr>
      {%endfor%}
    </tbody>
  </table>
</div>
{%endif%}

{%endblock%}

{%block javascript%}
<script type="text/javascript">
  $(function() {
      var dt = buildDataTable(
          "#tbl-delete-phenotypes",
          data=[],
          columns=[],
          userSettings={
              responsive: true,
              select: {
                  style: "os",
                  info: false
              },
              initComplete: function(setting, json) {
                  var api = this.api();
                  api.rows().select();
                  api.rows({selected: true}).nodes().each((node, index) => {
                      $(node).find('input[type="checkbox"]:not(:checked)')
                          .prop("checked", true);
                  });
              }
          });
      // var dt = new DataTable("#tbl-delete-phenotypes", {
      //     responsive: true,
      //     select: {
      //         style: "os",
      //         info: false
      //     },
      //     initComplete: function(setting, json) {
      //         console.debug("Running page init...");
      //         this.api().rows().select();
      //         this.api().rows().nodes().each((node, index) => {
      //             $(node).find('input[type="checkbox"]:not(:checked)')
      //                 .prop("checked", true);
      //         })
      //     }
      // });

      $("#btn-select-all-phenotypes").on("click", function(event) {
          dt.selectAll();
      });

      $("#btn-deselect-all-phenotypes").on("click", function(event) {
          dt.deselectAll();
      });

      // dt.on("select", (event, datatable, type, indexes) => {
      //     console.debug("this got called...");
      //     datatable.rows(indexes)
      //         .nodes()
      //         .each(function(node, index) {
      //             $(node).find('input[type="checkbox"]:not(:checked)')
      //                 .prop("checked", true);
      //         });
      // });

      // dt.on("deselect", (event, datatable, type, indexes) => {
      //     datatable.rows(indexes)
      //         .nodes()
      //         .each(function(node, index) {
      //             $(node).find('input[type="checkbox"]:checked')
      //                 .prop("checked", false);
      //         });
      // });

      // dt.on("deselect", (event, datatable, type, cell, originalEvent) => {
      //     datatable.rows({selected: false}).nodes().each((node, index) => {
      //         $(node).find(".chk-row-select").prop("checked", false)
      //     });
      // });
  });
</script>
{%endblock%}