{% extends "base.html" %}

{% load static %}
{% load extras %}

{% block title %}Marketplace{% endblock title %}

{% block main %}
    <a href="{% url "colloscope.dashboard" %}">Retour au tableau de bord</a>
    
    <h1>Marketplace</h1>

    Bienvenue sur le marketplace.
    
    {% if colles %}
        Les colles libres sont&nbsp;:
        <div class="colle-wrapper">
        {% for colle in colles %}
            <div class="colle">
                <span class="summary">{{ colle.slot.subject }} ({{ colle.slot.colleur }})</span>
                <ul>
                    <li><i class="fa-solid fa-clock"></i> Le {{ colle.datetime|date:"l" }} {{ colle.datetime|date:"DATETIME_FORMAT" }}</li>
                    <li><i class="fa-solid fa-users"></i> {{ colle.groups.all | print_manager | safe }} ({{ colle.volume }} / {{ colle.slot.capacity }})</li>
                    <li><i class="fa-solid fa-earth-americas"></i> {{ colle.slot.room }}</li>
                    <li><i class="fa-solid fa-circle-exclamation"></i>
                        <form action="{% url "colloscope.enroll" %}"
                              method="POST"
                              onsubmit="return confirm('Êtes-vous sûr de vouloir vous inscrire à la colle {{ colle }} ');">
                            {% csrf_token %}
                            <input type="hidden" name="colle_id" value="{{ colle.id }}">
                            <button type="submit">Réserver</button>
                        </form>
                    </li>
                </ul>
            </div>
        {% endfor %}
        </div>
    {% else %}
        Aucune colle n'est disponible
    {% endif %}
    
{% endblock main %}