{% extends 'account_layout.html' %}
{% load i18n %}
{% load staticfiles %}

{% block headers %}
{% endblock %}

{% block account_content_outer %}
<div class="flex-page-content">
    {% if user_motd %}
    <div class="account-motd">
        <p> {{ user_motd | safe }} </p>
    </div>
    {% endif %}

    <div class="content-box account-status">
        <h3>{% trans 'Account' %} : {{user.username}}</h3>

        <table>
            <tr>
                <td>{% trans "Status" %}</td>
                <td class="account-status__status">
                    {% if user.vpnuser.is_paid %}
                    ACTIVE
                    {% else %}
                    INACTIVE
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>{% trans "Subscription" %}</td>
                <td>
                    {% if subscription.status == 'active' %}
                        {% blocktrans trimmed with until=subscription.next_renew|date:'Y-m-d' backend=subscription.backend.backend_verbose_name %}
                        <b>ACTIVE</b>. Renews on {{until}} via {{backend}}.
                        {% endblocktrans %}
                        (<a href="{% url 'payments:cancel_subscr' %}">{% trans "cancel" %}</a>)
                    {% else %}
                        -
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>{% trans "Expiration" %}</td>
                <td>
                    {{user.vpnuser.expiration|date:'Y-m-d H:i'|default:'-'}}
                    {% if user.vpnuser.is_paid %}
                        {% blocktrans trimmed with left=user.vpnuser.expiration|timeuntil %}
                        ({{ left }} left)
                        {% endblocktrans %}
                    {% endif %}
                </td>
            </tr>
        </table>

    </div>

    {% if not subscription %}
    <div class="content-box account-fund">
        <div class="account-payment-box account-payment-tabs">
            <div class="account-payment-tab">
                <input type="radio" name="type" id="tab_subscr" value="subscr" checked />
                <label for="tab_subscr"><span>{% trans 'Subscription' %}</span></label>
                <div class="tab-content">
                    <form action="/payments/new" method="post" class="pure-form pure-form-aligned centered-form">
                        {% csrf_token %}
                        <input type="hidden" name="subscr" value="1" />

                        <fieldset>
                            <div class="pure-control-group">
                                <label for="ino_time">{% trans 'Pay every' %}</label>
                                <select id="ino_time" name="time" class="pure-input-1-2">
                                    <option value="3">3 {% trans 'months' %} ({{price.3}})</option>
                                    <option value="6">6 {% trans 'months' %} ({{price.6}})</option>
                                    <option value="12">12 {% trans 'months' %} ({{price.12}})</option>
                                </select>
                            </div>

                            <div class="pure-control-group">
                                <label for="ino_method">{% trans 'by' %}</label>
                                <select id="ino_method" name="method" class="pure-input-1-2">
                                    {% for backend in subscr_backends %}
                                        <option value="{{ backend.backend_id }}" {% if backend.backend_id == default_backend %}selected{% endif %}>
                                            {{ backend.backend_display_name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="pure-controls">
                                <input type="submit" class="pure-button pure-button-primary"
                                       value="{% trans 'Subscribe' %}" />
                            </div>
                            <p>{% trans 'You can cancel the recurring payment at any time.' %}</p>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="account-payment-tab">
                <input type="radio" name="type" id="tab_onetime" value="onetime" />
                <label for="tab_onetime"><span>{% trans 'One-time payment' %}</span></label>
                <div class="tab-content">
                    <form action="/payments/new" method="post" class="pure-form pure-form-aligned centered-form">
                        {% csrf_token %}
                        <input type="hidden" name="subscr" value="0" />

                        <fieldset>
                            <div class="pure-control-group">
                                <label for="ino_time">{% trans 'Add' %}</label>
                                <select id="ino_time" name="time" class="pure-input-1-2">
                                    <option value="1">1 {% trans 'month' %} ({{price.1}})</option>
                                    <option value="3">3 {% trans 'months' %} ({{price.3}})</option>
                                    <option value="6">6 {% trans 'months' %} ({{price.6}})</option>
                                    <option value="12">12 {% trans 'months' %} ({{price.12}})</option>
                                </select>
                            </div>

                            <div class="pure-control-group">
                                <label for="ino_method">{% trans 'by' %}</label>
                                <select id="ino_method" name="method" class="pure-input-1-2">
                                    {% for backend in backends %}
                                        <option value="{{ backend.backend_id }}" {% if backend.backend_id == default_backend %}selected{% endif %}>
                                            {{ backend.backend_display_name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="pure-controls">
                                <input type="submit" class="pure-button pure-button-primary"
                                       value="{% trans 'Buy Now' %}" />
                            </div>
                            <p>{% trans 'If you still have time, it will be added.' %}</p>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="account-payment-tab">
                <input type="radio" name="type" id="tab_coupon" value="coupon" />
                <label for="tab_coupon"><span>{% trans 'Coupon' %}</span></label>
                <div class="tab-content">
                    <form action="/account/gift_code" method="post" class="pure-form pure-form-aligned centered-form">
                        {% csrf_token %}

                        <fieldset>
                            <div class="pure-control-group">
                                <label for="ins_code">{% trans 'Code' %}</label>
                                <input type="text" id="ins_code" name="code" maxlength="32" class="pure-input-1-2"
                                    pattern="[ ]*[a-zA-Z0-9]{1,32}[ ]*" autocomplete="off" />
                            </div>
                            <div class="pure-controls">
                                <input type="submit" class="pure-button pure-button-primary"
                                    value="{% trans 'Use' %}" />
                            </div>
                            <p>{% trans 'Our coupons are alphanumeric codes that give you a fixed duration of VPN access.' %}<br />
                                {% trans 'They can be single or multi use.' %}
                            </p>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% if user.vpnuser.can_have_trial %}
    <div class="content-box account-trial">
        <p>
            {% blocktrans trimmed with left=user.vpnuser. %}
                For up to one week, you can activate your free trial for the next two hours by clicking on this button:
            {% endblocktrans %}
        </p>
        <form action="/account/trial" method="post" class="pure-form" name="trial_form">
            {% csrf_token %}
            <div class="h-captcha" data-sitekey="{{ hcaptcha_site_key }}" data-callback="onCaptcha"></div>
            <script src="https://hcaptcha.com/1/api.js" async defer></script>
            <script>
                function onCaptcha(v) {
                    document.forms.trial_form.submit();
                }
            </script>
        </form>
    </div>
    {% endif %}

    <div class="account-aff-box">
        <p>
            {% blocktrans trimmed %}
            Get two weeks for free for every referral that takes at least one month!
            {% endblocktrans %}
            {% trans 'Share this link' %}:
            <form class="pure-form">
                <fieldset>
                    <input type="text" size="30" value="{{ref_url}}" />
                    <a target="_blank" href="{{twitter_link}}">{% trans 'tweet' %}</a>
                    <a href="/static/affimg/banner.png">banner</a>
                    <a href="/static/affimg/leaderboard.png">leaderboard</a>
                </fieldset>
            </form>
        </p>
    </div>

</div>
{% endblock %}