{% extends "base.html" %}
{#% load endless %#}
{% load static %}

{% block head %}

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<!-- Load js for initializing tables via their server-side options -->
<script type="text/javascript" charset="utf8" src="{% static 'js/datatableview.js' %}"></script>
<script type="text/javascript">
    datatableview.auto_initialize = false;
    $(function(){

        var xeditable_options = {};
        datatableview.initialize($('.datatable'), {
            fnRowCallback: datatableview.make_xeditable(xeditable_options),
        });

        $('#btn-download').on('click', function() {
            var $this = $(this);
            var loadingText = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  Loading...';
            if ($(this).html() !== loadingText) {
            $this.data('original-text', $(this).html());
            $this.html(loadingText);
            }
            setTimeout(function() {
            $this.html($this.data('original-text'));
            }, 20000);
        });
    });  


</script>
{% endblock %}


{% block content %}

    <div class="container text-center">

    <h1>Prescription dose</h1>
      <br/>
      <br/>


      <form action="" method="post">
          {% csrf_token %}
          {{ form.as_p }}



          <button type="submit" name="calculate">Calculate</button>



      </form>

      <br/>
      <br/>
    <table class="table">
        <thead>
            <tr>
                <td></td>
                <td>Gy</td>
                <td>/2</td>
                <td>/3</td>
                <td>/4</td>
                <td>/5</td>
            </tr>
        </thead>
        <tbody>
            {% for k,v in result.items %}
            <tr>
                <td>{{k}}</td>
                <td>{{v.0}}</td>
                <td>{{v.1}}</td>
                <td>{{v.2}}</td>
                <td>{{v.3}}</td>
                <td>{{v.4}}</td>
            </tr>
           {% endfor %}
        </tbody>
    </table>

    </div>

{% endblock %}