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


{% block seo %}
    <title>CUMAS365 - {{ 'lang.price' | trans }}</title>

    <meta name="description" content="{{ 'lang.price_meta_description' | trans }}">
    <meta name="keywords" content="{{ 'lang.price_meta_keywords' | trans }}">
    <meta name="robots" content="index, follow">

    {% set currentLocale = app.request.locale %}

    {% for locale in ['en', 'de', 'es', 'ru'] %}
        {% if currentLocale != locale %}
            <link rel="alternate" hreflang="{{ locale }}" href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': locale})) }}">
        {% endif %}
    {% endfor %}

{% endblock %}


{% block styles %}
    <style>

        .footer {
            background-color: #202020 !important;
        }

        {% if not app.user %}
        header {
            background: #202020 !important;
        }


        .custom-navbar {
            color: #FFFFFF !important;
            /*background: linear-gradient(to top,*/
            /*rgba(255, 255, 255, 0.2),*/
            /*rgba(153, 153, 153, 0.2)) !important;*/
        }

        {% endif %}

        {% if app.user %}
        #navbar {
            background-color: #202020 !important;
            border: none !important;
        }

        .dropdown-menu-container {

            background: #202020 !important;

            a {
                color: #FFFFFF !important;
            }

            svg {
                color: #FFFFFF !important;
            }
        }

        .image-text {
            color: white !important;
        }

        .open-menu::after {
            border-top: 5px solid white !important;
        }

        header .nav-link {
            color: white !important;
        }

        header .nav-link:hover {
            color: gray !important;
        }

        .navigation-menu .dropdown-menu-container .no-hover {
            color: white !important;
        }

        .navigation-menu .dropdown-menu-container .no-hover:hover {
            color: white !important;
        }

        .logo-wrap {
            color: white !important;
        }

        {% endif %}
    </style>
{% endblock %}

{% block body %}
    <div class="price-container">
        {#        1 #}
        <div class="title-container p-3 p-md-5">
            <div class="title-wrap">
                <h1 class="title-price">
                    Find the <span class="purple-color">perfect</span
                    ><br/>
                    <span class="blue-color">Fit</span><br/>
                    For <span class="blue-color">ur</span>
                    <span class="blue-color">needs!</span>
                </h1>
            </div>
        </div>
        {#        2 #}
        <div class="fixed-size">
            {#            <div class="container"> #}
            {#                <div class="row"> #}
            <div class="price-table-container price-middle-container">
                <div class="navbar-plan-section">
                    <div class="section-plan free">
                        <h4 class="text-start">{{ 'lang.chooseYourPlan' | trans }}</h4>
                        <div class="radio-wrap">
                            <label class="radio mt-3">
                                <div class="display-flex-start">
                                    <input type="radio" name="billing" value="yearly" checked>
                                    <span class="name">{{ 'lang.yearly' |trans }}</span>
                                </div>
                                <span class="savings">{{ 'lang.savings' |trans }}</span>
                            </label>

                            <label class="radio mt-3">
                                <div class="display-flex-center">
                                    <input type="radio" name="billing" value="monthly">
                                    <span class="name">{{ 'lang.monthly' |trans }}</span>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="navbar-plan-section">
                    <div class="section-plan free border-card">
                        <h2>Free</h2>
                        <p class="price">€0</p>
                        <p>{{ 'lang.sendUpTo3GB'|trans }}</p>
                        <p>{{ 'lang.noBrandingProtocolsContacts'|trans }}</p>
                        <p>{{ 'lang.noAdditionalUsers'|trans }}</p>
                        {% if app.user %}
                            {% if license == 'free' %}
                                <p class="link-button white-button current-button">
                                    {{ 'lang.currentVersion' | trans }}
                                </p>
                            {% elseif license == 'pro' %}
                                <a class="link-button white-button" href="{{ path('app_support_logged_in') }}">
                                    {{ 'lang.downgrade' | trans }}
                                </a>
                            {% elseif license == 'business' %}
                                <a class="link-button white-button" href="{{ path('app_support_logged_in') }}">
                                    {{ 'lang.downgrade' | trans }}
                                </a>
                            {% endif %}

                        {% else %}
                            <a class="link-button white-button" href="{{ path('app_register') }}">
                                {{ 'lang.register' | trans }}
                            </a>
                        {% endif %}
                    </div>
                </div>
                <div class="navbar-plan-section">
                    <div class="section-plan pro">
                        <h2>Pro</h2>
                        <p class="price">
                            <span id="pro-price">€7.90</span>
                            <span class="month-span">{{ 'lang.priceMonth' | trans }}</span>
                        </p>
                        <p>{{ 'lang.sendReceive100GB'|trans }}</p>
                        <p>{{ 'lang.ownBrandingProtocolsContacts'|trans }}</p>
                        <p>{{ 'lang.oneUserAccount'|trans }}</p>

                        {% if app.user %}
                            {% if license == 'free' %}
                                <a class="link-button blue-button" id="pro-link"
                                   href="{{ path('app_payment_pro_year') }}">
                                    {% if app.user.trial %}
                                        {{ 'lang.tryNow'|trans }}
                                    {% else %}
                                        {{ 'lang.buy'|trans }}
                                    {% endif %}
                                </a>
                            {% elseif license == 'pro' %}
                                <p class="link-button blue-button current-button">
                                    {{ 'lang.currentVersion' | trans }}
                                </p>
                            {% elseif license == 'business' %}
                                <a class="link-button blue-button" href="{{ path('app_support_logged_in') }}">
                                    {{ 'lang.downgrade' | trans }}
                                </a>
                            {% endif %}

                        {% else %}
                            <a class="link-button blue-button" href="{{ path('app_login') }}">
                                {{ 'lang.signIn' | trans }}
                            </a>
                        {% endif %}
                    </div>
                </div>
                <div class="navbar-plan-section">
                    <div class="section-plan business">
                        <h2>Business</h2>
                        <p class="price">
                            <span id="business-price">€39.90</span>
                            <span class="month-span">{{ 'lang.priceMonth' | trans }}</span>
                        </p>
                        <p>{{ 'lang.sendReceive100GB'|trans }}</p>
                        <p>{{ 'lang.ownBrandingProtocolsContacts'|trans }}</p>
                        <p>{{ 'lang.upTo20Users'|trans }}</p>
                        {% if app.user %}
                            {% if license == 'free' %}
                                <a class="link-button purple-button" id="business-link"
                                   href="{{ path('app_payment_bus_year') }}">
                                    {% if app.user.trial %}
                                        {{ 'lang.tryNow'|trans }}
                                    {% else %}
                                        {{ 'lang.buy'|trans }}
                                    {% endif %}
                                </a>
                            {% elseif license == 'pro' %}
                                <a class="link-button purple-button" id="business-link"
                                   href="{{ path('app_payment_bus_year') }}">
                                    {% if app.user.trial %}
                                        {{ 'lang.tryNow'|trans }}
                                    {% else %}
                                        {{ 'lang.buy'|trans }}
                                    {% endif %}
                                </a>
                            {% else %}
                                <a class="link-button purple-button current-button">
                                    {{ 'lang.currentVersion' | trans }}
                                </a>
                            {% endif %}
                        {% else %}
                            <a class="link-button purple-button" href="{{ path('app_login') }}">
                                {{ 'lang.signIn' | trans }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>


            {#                </div> #}
            {#            </div> #}
        </div>
        {#        3 #}
        <div class="fixed-size d-none d-lg-block">
            {# NAVBAR #}
            <div class="navbar-price" id="navbar-price">
                <div class="navbar-empty-div"></div>
                <div class="navbar-plan-container">
                    <div class="navbar-plan-section free">
                        <div class="plan-info-wrap free">
                            <div class="plan-info">
                                <h2>{{ 'lang.details' | trans }}</h2>
                            </div>
                        </div>
                    </div>

                    <div class="navbar-plan-section free">
                        <div class="plan-info-wrap free">
                            <div class="plan-info">
                                <h2>Free</h2>
                                <p class="price">€0</p>
                            </div>
                            {% if app.user %}
                                {% if license == 'free' %}
                                    <p class="link-button white-button current-button" disabled>
                                        {{ 'lang.currentVersion' | trans }}
                                    </p>
                                {% elseif license == 'pro' %}
                                    <a class="link-button white-button" href="{{ path('app_support_logged_in') }}">
                                        {{ 'lang.downgrade' | trans }}
                                    </a>
                                {% else %}
                                    <a class="link-button white-button" href="{{ path('app_support_logged_in') }}">
                                        {{ 'lang.downgrade' | trans }}
                                    </a>
                                {% endif %}

                            {% else %}
                                <a class="link-button white-button" href="{{ path('app_register') }}">
                                    {{ 'lang.register' | trans }}
                                </a>
                            {% endif %}
                        </div>
                    </div>

                    <div class="navbar-plan-section pro">
                        <div class="plan-info-wrap pro">
                            <div class="plan-info">
                                <h2>Pro</h2>
                                <p class="price" id="pro-price-nav">€7.90</p>
                            </div>
                            {% if app.user %}
                                {% if license == 'free' %}
                                    <a class="link-button blue-button" id="pro-link-nav"
                                       href="{{ path('app_payment_pro_year') }}">
                                        {% if app.user.trial %}
                                            {{ 'lang.tryNow'|trans }}
                                        {% else %}
                                            {{ 'lang.buy'|trans }}
                                        {% endif %}
                                    </a>
                                {% elseif license == 'pro' %}
                                    <p class="link-button blue-button current-button">
                                        {{ 'lang.currentVersion' | trans }}
                                    </p>
                                {% else %}
                                    <a class="link-button blue-button" href="{{ path('app_support_logged_in') }}">
                                        {{ 'lang.downgrade' | trans }}
                                    </a>
                                {% endif %}

                            {% else %}
                                <a class="link-button blue-button" href="{{ path('app_login') }}">
                                    {{ 'lang.signIn' | trans }}
                                </a>
                            {% endif %}
                        </div>
                    </div>

                    <div class="navbar-plan-section business">
                        <div class="plan-info-wrap business">
                            <div class="plan-info">
                                <h2>Business</h2>
                                <p class="price" id="business-price-nav">€39.90</p>
                            </div>
                            {% if app.user %}
                                {% if license == 'free' %}
                                    <a class="link-button purple-button" id="business-link-nav"
                                       href="{{ path('app_payment_bus_year') }}">
                                        {% if app.user.trial %}
                                            {{ 'lang.tryNow'|trans }}
                                        {% else %}
                                            {{ 'lang.buy'|trans }}
                                        {% endif %}
                                    </a>
                                {% elseif license == 'pro' %}
                                    <a class="link-button purple-button" id="business-link-nav"
                                       href="{{ path('app_payment_bus_year') }}">
                                        {% if app.user.trial %}
                                            {{ 'lang.tryNow'|trans }}
                                        {% else %}
                                            {{ 'lang.buy'|trans }}
                                        {% endif %}
                                    </a>
                                {% else %}
                                    <p class="link-button purple-button current-button">
                                        {{ 'lang.currentVersion' | trans }}
                                    </p>
                                {% endif %}

                            {% else %}
                                <a class="link-button purple-button" href="{{ path('app_login') }}">
                                    {{ 'lang.signIn' | trans }}
                                </a>
                            {% endif %}
                        </div>
                    </div>

                </div>
            </div>
            {# NAVBAR END #}

            {# TABLE #}
            <div id="target-block">
                <h3>{{ 'lang.planDetails' | trans }}</h3>
                <table>
                    <tbody class="price-table-container">
                    <tr class="navbar-plan-section free">
                        <td>{{ 'lang.transferLimit' | trans }}</td>
                        <td>{{ 'lang.storagePerPerson' | trans }}</td>
                        <td>{{ 'lang.dataLocation' | trans }}</td>
                        <td>{{ 'lang.numberOfUsers' | trans }}</td>
                        <td>{{ 'lang.branding' | trans }}</td>
                        <td>{{ 'lang.manageContacts' | trans }}</td>
                        <td>{{ 'lang.dataImport' | trans }}</td>
                        <td>{{ 'lang.customMailTemplate' | trans }}</td>
                    </tr>
                    <tr class="navbar-plan-section free">
                        <td>2 GB</td>
                        <td>0</td>
                        <td>{{ 'lang.germany' | trans }}</td>
                        <td>1</td>
                        <td>{{ 'lang.no' | trans }}</td>
                        <td>{{ 'lang.no' | trans }}</td>
                        <td>{{ 'lang.no' | trans }}</td>
                        <td>{{ 'lang.no' | trans }}</td>
                    </tr>
                    <tr class="navbar-plan-section pro">
                        <td>100 GB</td>
                        <td>{{ 'lang.tbPerPerson' | trans }}</td>
                        <td>{{ 'lang.germany' | trans }}</td>
                        <td>1</td>
                        <td>{{ 'lang.yes' | trans }}</td>
                        <td>{{ 'lang.yes' | trans }}</td>
                        <td>{{ 'lang.yes' | trans }}</td>
                        <td>{{ 'lang.yes' | trans }}</td>
                    </tr>
                    <tr class="navbar-plan-section business">
                        <td>100 GB</td>
                        <td>{{ 'lang.tbPerPerson' | trans }}</td>
                        <td>{{ 'lang.germany' | trans }}</td>
                        <td>20</td>
                        <td>{{ 'lang.yes' | trans }}</td>
                        <td>{{ 'lang.yes' | trans }}</td>
                        <td>{{ 'lang.yes' | trans }}</td>
                        <td>{{ 'lang.yes' | trans }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            {# TABLE END  #}
        </div>
        {#        4 #}
        <div class="container container-FAQ">
            <h3>FAQ</h3>
            <div class="accordion" id="faqAccordion">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                           data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                            {{ 'lang.Question1' | trans }}
                        </a>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                         data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            {{ 'lang.Answer1' | trans }}
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                           data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            {{ 'lang.Question2' | trans }}
                        </a>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                         data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            {{ 'lang.Answer2' | trans }}
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                           data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            {{ 'lang.Question3' | trans }}
                        </a>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                         data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            {{ 'lang.Answer3' | trans }}
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFour">
                        <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                           data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                            {{ 'lang.Question4' | trans }}
                        </a>
                    </h2>
                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                         data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            {{ 'lang.Answer4' | trans }}
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFive">
                        <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                           data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                            {{ 'lang.Question5' | trans }}
                        </a>
                    </h2>
                    <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
                         data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            {{ 'lang.Answer5' | trans }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('price') }}
    {{ encore_entry_script_tags('toggle_price') }}
{% endblock %}