{% extends 'base.html' %}

{% block title %}{{model}}}{% endblock %}
{% block body %}
<h1>{{model}}</h1>
<p>
<form action="{{url_prefix}}/{{model.lower()}}/upload/" method="post">
<input id='fileid' accept=".csv" type='file' hidden/>

<button id='buttonid' class="ui right floated small primary labeled icon button"
        type='submit'><i class="file alternate icon"></i>Upload CSV</button>

</form></br></br>
</p>


<script>
$(document).ready( function () {
    $('#table_id').DataTable();
} );
$(function(){
	$("#delete_all").click(function(){
		$(".ui.basic.modal").modal('show');
	});
	$(".ui.basic.modal").modal({
		closable: true
	});
});
document.getElementById('buttonid').addEventListener('click', openDialog);

function openDialog() {
  document.getElementById('fileid').click();
}

</script>
<table id="table_id" class="display ui compact sortable celled definition table">
    <thead class="full-width">
        <tr>{% for column_name  in columns %}
            <th>{{column_name}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>

{% for row in model_data %}
        <tr>
            {% for field in row %}
            <td>{{field}}</td>
        {% endfor %}

        <td><form action="{{url_prefix}}/{{model.lower()}}/delete/" method="post">
            {% for field in row %}

  <input type="hidden" name="{{columns[loop.index-1]}}" value="{{field}}"\>
        {% endfor %}
            <button type=submit> <i class="trash icon"></i></button>
</form></td>
        </tr>
{% endfor %}
    </tbody>
</table>

<div class="ui basic modal">
  <div class="ui icon header">
    <i class="trash icon"></i>
   Delete all {{model}}
  </div>
  <div class="content">
    <p>Are you sure, that you want to delete all {{model}}?</p>
  </div>
  <div class="actions">
    <div class="ui red basic cancel inverted button">
      <i class="remove icon"></i>
      No
    </div>
    <div class="ui red ok inverted button">
      <i class="checkmark icon"></i>
      Yes
    </div>
  </div>
</div>


    <button id="delete_all" class="ui right floated small yellow labeled icon button" type="button">
    <i class="trash icon"></i>Delete all {{model}}</button>

 <div class="ui right floated small primary labeled icon button">
            <i class="user icon"></i>
            <a style="color:#fff;" href="{{url_prefix}}/{{model.lower()}}/add">Add {{model}}</a>
        </div>
<a href=class="item"></a>

{% endblock %}