{% extends "layouts/layout.njk" %}
{% block body %}
    <div class="container is-desktop page">
        <table class="table is-fullwidth">
            <thead>
                <tr>
                    <h4 class="title is-4 has-text-centered">Sarjad</h4>
                </tr>
                <tr class="has-background-primary ">
                    <th class="has-text-dark">Sarja nimetus</th>
                    <th class="has-text-centered has-text-dark" style="width: 30%">Võistlusi sarjas</th>
                    <th class="has-text-right" style="width: 18%">
                        {% if not add and not edit %}
                            <a href="#">
                                <span class="icon">
                                    <i class="fas fa-plus  has-text-dark" title="Lisa sari"></i>
                                </span>
                            </a>
                        {% endif %}
                    </th>
                </tr>
            </thead>
            {% for item in series %}
                <tbody id="series_{{ item.id }}">
                    <tr class="has-background-dark" style="border-bottom: 1px solid #4e5d6c; border-top: 1px solid #4e5d6c">
                        <th>
                            {{ item.seriesName }}
                        </th>
                        <th class="has-text-centered">
                            {{ item.events | length }}
                        </th>
                        <th class="has-text-right">
                            {% if not add and not edit %}
                                {% if selected === item.id %}
                                    <a href="/series" up-target=".page">
                                        <span class="icon">
                                            <i class="fas fa-bars"></i>
                                        </span>
                                    </a>
                                {% else %}
                                    <a href="/series?select={{ item.id }}" up-target=".page">
                                        <span class="icon">
                                            <i class="fas fa-bars"></i>
                                        </span>
                                    </a>
                                {% endif %}
                                <a href="/series/event/add?series={{ item.id }}" up-target=".page">
                                    <span class="icon">
                                        <i class="fas fa-plus" title="Lisa võistlus"></i>
                                    </span>
                                </a>
                            {% endif %}
                        </th>
                    </tr>
                    {% if selected === item.id %}
                        {% for event in item.events %}
                            {% if event.id === eventid %}
                                {% include "components/event_edit.njk" %}
                            {% else %}
                                {% include "components/event_view.njk" %}
                            {% endif %}
                        {% endfor %}
                        {% if add %}
                            {% include "components/event_add.njk" %}
                        {% endif %}
                    {% endif %}
                </tbody>
            {% endfor %}
        </table>
    </div>

{% endblock %}