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

{% block stylesheets %}
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}"/>
{% endblock %}

{% block javascripts %}
    <script>window.club = "{{ club.slug }}";</script>
    <script src="{{ asset('js/donation.js') }}"></script>
{% endblock %}

{% block title %}{{ club.name }}{% endblock %}

{% block body %}

    {% include 'donor-form.html.twig' with { 'donors': club.donors } %}
    {% include 'donors.html.twig' with { 'donors': club.donors } %}
    {% include 'donors-thanks.html.twig' %}
    {% include 'club_info.html.twig' %}

    <div class="container">
        <div class="content">
            {% include 'menu.html.twig' %}
            <div class="stadium">
                {#{% if club.description is not null and club.description != '' %}<div class="club-infos">{{ club.description|raw }}</div>{% endif %}#}
                <div class="rep">
                    <div class="cases">
                        <div class="top">
                            <div class="vip">{% for i in 0..15 %}<div class="item vip-item">&nbsp;</div>{% endfor %}</div>
                            <div class="lateral">{% for i in 0..59 %}<div class="item tribune-item">&nbsp;</div>{% endfor %}</div>
                            <div class="vip">{% for i in 0..15 %}<div class="item vip-item">&nbsp;</div>{% endfor %}</div>
                        </div>
                        <div class="middle">
                            <div class="kop">{% for i in 0..43 %}<div class="item kop-item">&nbsp;</div>{% endfor %}</div>
                            <div class="eco">{% for i in 0..164 %}<div class="item eco-item">&nbsp;</div>{% endfor %}</div>
                            <div class="kop">{% for i in 0..43 %}<div class="item kop-item">&nbsp;</div>{% endfor %}</div>
                        </div>
                        <div class="bottom">
                            <div class="vip">{% for i in 0..15 %}<div class="item vip-item">&nbsp;</div>{% endfor %}</div>
                            <div class="presidentiel">{% for i in 0..59 %}<div class="item presidentielle-item">&nbsp;</div>{% endfor %}</div>
                            <div class="vip">{% for i in 0..15 %}<div class="item vip-item">&nbsp;</div>{% endfor %}</div>
                        </div>
                    </div>
                    <div class="picture" {% if club.background is defined and club.background != null%}style="background: url('/images/clubs/{{ club.background }}') no-repeat center center !important; background-size: cover !important;"{% endif %}></div>
                </div>

                <script>
                    var donors = JSON.parse('{{ donors|raw }}');
                    for(var z in donors) {
                        let items = document.querySelectorAll('.' + z + '-item');
                        for(let i = 0; i < donors[z]; i++) {
                            if(items.length >= i) {
                                items[i].style.opacity = '0';
                            }
                        }
                    }
                </script>

                <p class="support-listbtn">
                    <a href="#" class="btn">{% trans %}see_donators{% endtrans %}</a>
                </p>
                {#{% if club.description != '' and club.description is not null %}
                    <div style="margin-top: 80px; width: 60%; background: rgba(~255,255, 255, 0.3); border-radius: 5px; padding: 10px 20px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.4); font-size: 13px; line-height: 20px; color: white;">{{ club.description|raw }}</div>
                {%  endif %}#}
            </div>
        </div>
        <div class="counter">
            <div>
                <p>{% trans %}count_donators{%endtrans %}</p>
                <p>{{ club.donors.count }}</p>
            </div>
        </div>
    </div>

    <script src="https://js.stripe.com/v3/"></script>
    <script>
        function ready() {
            window.addEventListener('keydown', e => {
                if(e.keyCode === 27) {
                    document.querySelector('.support').classList.remove('show');
                    document.querySelector('.supports-list').classList.remove('show');
                }
            });

            /*document.querySelector(('#submit')).addEventListener('click', e => {
                e.stopPropagation();
                e.preventDefault();
                document.querySelector('.support').classList.remove('show');
            });*/

            document.querySelector('.support-listbtn').addEventListener('click', e => {
                e.stopPropagation();
                e.preventDefault();
                document.querySelector('.supports-list').classList.add('show');
            });

            window.locale = "{{ app.request.locale }}";

        }
    </script>

{% endblock %}