{% extends edc_base_template %}

{% load static %}

{% block main %}

    <div class="container">
        <div><a href="{% url 'edc_visit_schedule:home_url' %}" role="button" class="btn btn-sm btn-primary pull-right clearfix">
          <i class="fas fa-reply fa-1x fa-fw" aria-hidden="true"></i>
        </a>
        </div>
        <div class="panel-group" id="accordion">
            {% for visit_schedule in visit_schedules.values %}
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h6 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#{{ visit_schedule.name }}">
                                Visit Schedule: {{ visit_schedule.verbose_name }} <i class="fas fa-caret-right"></i>
                            </a>
                        </h6>
                    </div>
                    <div id="{{ visit_schedule.name }}" class="panel-collapse collapse">
                        <div class="panel-group" id="accordion1">
                            {% for schedule in visit_schedule.schedules.values %}
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h6 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion1"
                                               href="#{{ visit_schedule.name|slugify }}-{{ schedule.name|slugify }}">
                                                Schedule {{ schedule.title }} <i class="fas fa-caret-right"></i>
                                            </a>
                                        </h6>
                                    </div>
                                    <div id="{{ visit_schedule.name|slugify }}-{{ schedule.name|slugify }}" class="panel-collapse collapse in">
                                        <div class="panel-group" id="accordion2">
                                            {% for visit in schedule.visits.values %}
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h6 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordion2"
                                                               href="#{{ visit_schedule.name|slugify }}-{{ schedule.name|slugify }}-{{ visit|slugify }}">
                                                                Visit {{ visit.title }} <i class="fas fa-caret-right"></i>
                                                            </a>
                                                        </h6>
                                                    </div>
                                                    <div id="{{ visit_schedule.name|slugify }}-{{ schedule.name|slugify }}-{{ visit|slugify }}" class="panel-collapse collapse">
                                                        <div class="table-responsive">
                                                            <table class="table table-hover">
                                                                <thead></thead>
                                                                <tbody>
                                                                {% for crf in visit.crfs %}
                                                                    <tr>
                                                                        <td>{{ crf.show_order }}</td>
                                                                        <td>{{ crf.verbose_name }}</td>
                                                                        <td>
                                                                            {% if crf.required %}Required{% endif %}
                                                                        </td>
                                                                    </tr>
                                                                {% endfor %}
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}
