{% extends "index.html" %}

{% block title %}Squads - Squadify{% endblock %}

{% block content %}
<div class="flex flex-col items-center">
    <a class="widget mb-4 md:mb-8" href="/squads/new">New Squad</a>
    <div class="flex flex-col space-y-2 md:space-y-4">
        {% for squad in squads_list %}
        <div class="flex shadow-md rounded-lg">
            <a class="flex-grow flex items-center md:text-2xl font-medium text-gray-800 px-4 py-2
                md:px-8 md:py-4 rounded-l-lg bg-gray-200 bg-opacity-90" href="/squads/{{squad.squad_id}}">
                {{squad.squad_name}}
            </a>
            <div class="flex items-center space-x-2 p-3 rounded-r-lg bg-gray-200 bg-opacity-70">
                <a href="/squads/{{squad.squad_id}}/delete_squad" onclick="return confirm('Delete this squad?')">
                    {% include "components/delete-icon.html" %}
                </a>
            </div>
        </div>
        {% endfor %}

        {% if squads_list|length == 0 %}
        <p class="card">Create a squad above!</p>
        {% endif %}
    </div>
</div>
{% endblock %}