{% extends "partial/layout.html.twig" %}

{% block title %}{{ pageTitlePrepend }} {{ t("account", "account")|title }}{% endblock %}
{% block description %}{{ pageTitlePrepend }} {{ t("upgrade_meta_description", "Your Account") }}{% endblock %}
{% block keywords %}{{ pageTitlePrepend|lower }}{{ t("upgrade_meta_keywords", ", account, paid, membership, upload, download, site") }}{% endblock %}
{% block selected_navigation_link %}upgrade{% endblock %}

{% block body %}
    <section class="text-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 col-lg-11">
                    <div class="cta">
                        <h2>{{ pageTitlePrepend }} {{ t("account", "account")|title }}</h2>
                        <p class="lead">
                            {{ t("upgrade_title_page_description_left", "See below for the various account and payment options.") }}
                        </p>
                        
                        {% if msg_page_errors is defined %}
                        <div class="alert bg--error">
                            <div class="alert__body"><i class="fa fa-exclamation-triangle color--error"></i>&nbsp;&nbsp;{% if msg_page_errors is defined %}{{ msg_page_errors|join('. ') }}{% endif %}</div>
                        </div>
                        {% elseif msg_page_successes is defined %}
                        <div class="alert bg--success">
                            <div class="alert__body"><i class="fa fa-check color--success"></i>&nbsp;&nbsp;{% if msg_page_successes is defined %}{{ msg_page_successes|join('. ') }}{% endif %}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>

    <section class="pricing-section-2 text-center">
        <div class="container">
            <div class="row">
                {% for pricingRow in pricingRows %}
                    <div class="col-md-6 col-lg-3" style="width: {{ pricingColSizePercent }}%; max-width: {{ pricingColSizePercent }}%; flex: 0 0 {{ pricingColSizePercent }}%;">
                        <div class="pricing pricing-3">
                            <div class="pricing__head bg--secondary boxed">
                                <h5>{{ pricingRow['_label'] }} {{ t('premium', 'premium') }}</h5>
                                <span class="h1"><span class="pricing__dollar">{{ SITE_CONFIG_COST_CURRENCY_SYMBOL }}</span>{{ pricingRow['price'] }}</span>
                                    {% if pricingRow['_per_day_cost'] > 0 %}
                                    <p class="type--fine-print">{{ SITE_CONFIG_COST_CURRENCY_SYMBOL }}{{ pricingRow['_per_day_cost'] }} {{ t('upgrade_boxes_per_day', 'per day')|title }}</p>
                                {% endif %}
                            </div>
                            <ul>
                                <li>
                                    <span><i class="fas fa-lock"></i>&nbsp;&nbsp;{{ t('secure_payment', 'secure payment')|title }}</span>
                                </li>
                                <li>
                                    <span><i class="fas fa-eye-slash"></i>&nbsp;&nbsp;{{ t('safe_and_anonymous', '100% Safe & Anonymous')|title }}</span>
                                </li>
                                <li>
                                    <span>{{ t('select_payment_method', 'Select Payment Method:')|title }}</span>
                                </li>
                            </ul>
                            <div class="boxed gateway-box-wrapper">
                                {{ PluginHelper.outputPaymentLinks({'days': pricingRow['_days'], 'price': pricingRow['price'], 'user_level_pricing_id': pricingRow['id'], 'user_level_package_id': packageLevelId})|raw }}
                            </div>
                        </div>
                        <!--end pricing-->
                    </div>
                {% endfor %}
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    
    {% if upgradePagePluginMiddle|length > 0 %}
        {% for pluginKey,upgradePagePluginMiddleItem in upgradePagePluginMiddle %}
            {{ upgradePagePluginMiddleItem['response_html']|raw }}
        {% endfor %}
    {% endif %}

    {% if Auth.loggedIn() == true %}
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2>{{ t("account_status", "account status")|title }}</h2>
                </div>
                <div class="col-md-12">
                    <table class="border--round table--alternate-row">
                        <tbody>
                            <tr>
                                <td class="text-right" style="width: 50%;"><strong>{{ t('account_type', 'account type')|title }}</strong></td>
                                <td>{{ accountTypeLabel }}</td>
                            </tr>
                            {% if accountType in ['paid', 'admin', 'moderator'] %}
                                <tr>
                                    <td class="text-right"><strong>{{ t('reverts_to_free_account', 'reverts to free account')|title }}</strong></td>
                                    <td>{{ accountExpiry }}</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    {% endif %}

    {% include '@themePath/partial/_premium_benefits.html.twig' %}

{% endblock %}