{% extends "topics/base.html" %}
{% block content %}
<link rel="stylesheet" href="static/css/topics.css">

<br><br>
<header>

<h1 style="color:white">Research Software Encyclopedia</h1>
<link rel='stylesheet' href='https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css'>
<link rel='stylesheet' href='https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css'>
</header>

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css'>
<link rel='stylesheet' href='https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css'>

<style>
#software_filter, #software_length, #software_info {
 color: white;
}
</style>
</header>

<div class="container">
<a class="button reset filter-reset" onclick="$('#software').DataTable().search('').draw()" style='float:right;padding-bottom:5px' href="#">reset</a></li>

<table id="software"  class="table table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Repository</th>
            <th>Description</th>
            <th>✏️ Criteria</th>
            <th>✏️ Taxonomy</th>
            <th>Topics</th>
        </tr>
  </thead>      
</table>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src=''></script>
<script>


</script>
<script>
$(document).ready(function(){

$.getJSON( "data.json", function( data ) {

$('#software').DataTable( {
  data: data,
  pageLength: 50,
  columns: [
    /*{ data: "avatar", 
      orderable: false, 
      render: function ( data, type, row ) { 
         if(!data.includes("None")) {
           return "<a href='" + row['url'] + "' target='_blank'><img width=40px src='" + data + "'></a>";       
         } else {
           return "<a href='" + row['url'] + "' target='_blank'><i style='font-size:30px' class='fa fa-code'></i>";       
         }
      },
      targets: 0,
    }, */
    { data: "uid",
      render: function ( data, type, row ) { return "<a href='" + row['url'] + "' target='_blank'>" +data +"</a>";},
      targets: 1,
    },
    { data: "description"},
    { data: null,
      render: function ( data, type, row ) { return "<a href='/software/repository/" + row['uid'] + "/annotate-criteria'>Annotate</a>";},   
    },
    { data: null,
      render: function ( data, type, row ) { return "<a href='/software/repository/" + row['uid'] + "/annotate-taxonomy'>Annotate</a>";},       
     },
    { data: "topics", 
      render: function ( data, type, row ) { 
         var topics = ""
         if(data.length > 0) {
           $.each(data, function(i, e){
              topics += "<button onclick=$('#software').DataTable().search('"+ e +"').draw(); class='tag button btn btn-primary btn-xs'>" + e + "</button>";
           })
         }
         return topics
      },
      targets: 0,
    },
  ]
});
});

})
</script>
<script src='https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js'></script>
<script src='https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.js'></script>
{% endblock %}
