{% extends "dashboard/base.html" %}
{% load static %}
{% block content %}
    <form action="#" method="POST">
        <div class="shadow sm:rounded-md sm:overflow-hidden bg-white">
            <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    Your API Access Key
                </h3>
            </div>
            <div class="py-6 px-4 space-y-6 sm:p-6">
                <div class="col-span-6">
                    <label class="block text-sm font-medium text-gray-500">Access Key</label>
                    <input type="text" disabled value="{{ token }}"
                           class="text-gray-600 mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-pc-500 focus:border-pc-500 sm:text-sm">
                </div>
            </div>
            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <button type="submit"
                        class="bg-pc-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-pc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pc-500">
                    Reset API Access Key
                </button>
            </div>
        </div>
    </form>

    <a target="_blank" href="https://tlbapi.eu.ngrok.io/number/check/+436506623388?token={{ token }}">https://tlbapi.eu.ngrok.io/number/check/+436506623388?token={{ token }}</a>
    curl "https://tlbapi.eu.ngrok.io/number/check/+436506623388?token={{ token }}"

    <div class="shadow sm:rounded-md sm:overflow-hidden mt-8">
        <div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Your Plan
            </h3>
        </div>

        <div class="border-t border-gray-200">
            <dl>
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Subscription
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ plan.name }} - <a class="text-pc-500" href="">Upgrade now!</a>
                    </dd>
                </div>

                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Next Billing Cycle
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {% if plan.id == next_plan.id %}
                            on {{ refresh_on }} UTC
                        {% else %}
                            on {{ refresh_on }} UTC, changes to {{ next_plan.name }}
                        {% endif %}
                    </dd>
                </div>

                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        API Usage
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <div class="relative pt-1">
                            <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pc-200">
                                <div style="width:{{ usage_percent }}%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pc-500"></div>
                            </div>
                        </div>
                        {{ usage_percent }}% ({{ usage }} / {{ plan.limit }})
                    </dd>
                </div>
            </dl>
        </div>
    </div>

    <div class="shadow sm:rounded-md sm:overflow-hidden mt-8">
        <div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Your Account
            </h3>
        </div>
        <div class="border-t border-gray-200">
            <dl>
                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Name
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ user.first_name }} {{ user.last_name }}
                    </dd>
                </div>

                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">
                        Email
                    </dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ user.email }}
                    </dd>
                </div>
            </dl>
        </div>
    </div>
{% endblock %}
