{% load static %} 
{% include "header.html" %}
{% include "navigation.html" %}
{% include "logo.html" %}

<div class="container">
  <div class="dashboard">
    <div class="span8 offset2">
      
      {% if data.task %}
      <h1><a href="/tasks">Tasks</a> <span style="font-size:18px"> / {{ data.task.name }}</span></h1>      
      {% else %}
      <h1>Tasks</h1>
      {% endif %}

      <hr>
      <div class="row" style="padding:5px">
      {% if data.task %}
      {% include "components/task.html" with task=data.task details=True %}
      {% else %}
      {% for task in data.tasks %}
      {% include "components/task.html" with task=task %}
      {% endfor %}
      {% endif %}
      </div>
      
      {% if not data.task %}
      <div class="row" style="padding:10px; padding-left:15px">
      <a href="/new_task">New task...</a>
      </div>
      {% endif %}

      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      
    </div>
  </div>
</div>

{% include "footer.html" %}


<script>
function toggle_visibility(id) {
      var x = document.getElementById(id);
      var y = document.getElementById('show_button');
      var z = document.getElementById('hide_button');
      if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none"
        z.style.display= "inline"
        
      } else {
        x.style.display = "none";
        y.style.display= "inline"
        z.style.display = "none"
      }
    }
</script>


