{% extends 'base.html' %}

{% block content %}


<div class="container-fluid">
  <div class="table-responsive">
  <div class="table-wrapper">
    <div class="table-title">
        <div class="row">
          <div class="col-sm-6">
            {% block header %}
            <h2>{% block title %}Cycles{% endblock %}</h2>
            {% endblock %}
          </div>
          <div class="col-sm-6">
            <a class="btn btn-primary" href="{{ url_for('cycles.create') }}">New Cycle</a>
          </div>
        </div>
    </div>
      {% for cycle in cycles %}
            <div class="card text-center" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">
                  {% if cycle['cycle_length'] %}
                    {% if loop.first %}
                      Day <b>{{ cycle['cycle_length'] - 1 }}</b>
                    {% else %}
                      <b>{{ cycle['cycle_length'] }}</b> days.
                    {% endif %}
                  {% else %}
                  {% endif %}</h5>
                <p class="card-text"><b>Started:</b> {{ cycle['start_time'][:10] }}
                  <br>
                  {% if cycle['end_time'] is not none %}
                  <b>Ended: </b>{{ cycle['end_time'][:10] }}
                  {% endif %}
                </p>
                <a href="{{ url_for('cycles.update', id=cycle['id'])}}"class="btn btn-primary">Edit</a>
              </div>
            </div>
        {% if not loop.last %}
        {% endif %}
      {% endfor %}

  </div>      
        
        
        
      
    

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


  {% endblock %}