{% extends 'base.html.twig' %}

{% block title %}Abonnements{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block body %}
    <div class="subscription-container">
        <h1 class="subscription-heading">Abonnements</h1>
        <ul class="subscription-list">
            {% for subscription in subscriptions %}
                <li class="subscription-card">
                    <strong>{{ subscription.getPdfLimit() }}€</strong>
                    <hr style="width: 100%;">
                    <strong>{{ subscription.getTitle() }}</strong>
                    <span>{{ subscription.getDescription() }}</span>
                    <span>Générations: <b>{{ subscription.getPdfLimit() }}</b></span>
                    <span>Prix: <b>{{ subscription.getPrice() }}€</b></span>
                    <form action="{{ path('update_subscription', {id: subscription.getId()}) }}" method="post">
                        <button type="submit">SOUSCRIRE</button>
                    </form>
                </li>
            {% endfor %}
        </ul>
    </div>
    <style>

        hr{
            border-color: #676E5F;
        }

        .subscription-heading {
            color: #CBBEB7;
        }
        .subscription-container {
            padding: 20px;
            background-color: #676E5F;
            color: #282828;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
        }

        .subscription-list {
            list-style: none;
            padding: 0;
            width: 100vw;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .subscription-card {
            border: 1px solid #CBBEB7;
            border-radius: 5px;
            padding: 20px;
            flex: 0 0 calc(30% - 40px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .subscription-card strong {
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        .subscription-card span {
            display: block;
            margin-bottom: 10px;
        }

        .subscription-card button {
            padding: 30px 40px;
            font-size: 1.5em;
            background-color: #676E5F;
            color: #CBBEB7;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 20px;
        }

        .subscription-card button:hover {
            background-color: #CBBEB7;
            color: #676E5F;
        }
    </style>
{% endblock %}