{% extends "customer_main.html" %}
{%load static%}

{% block modules_section %}
<!-- This block is intentionally left empty to exclude the modules section -->
{% endblock modules_section %}

{% block content %}


<div class="w-full flex flex-col gap-5 mt-5 mb-5">
    <div class="w-full h-fit bg-white rounded-md shadow-md px-5 py-9 flex flex-col justify-center items-center">
        <img src="{% static 'images/cpanellogo.png' %}" class="w-[180px] s:w-[250px]">

        <!-- PRICING ON DESKTOP -->
        <div class="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 mt-10">
            <div
                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_admin_cloud %} bg-black bg-opacity-20 {% endif %}">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Admin Cloud</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$20/month</p>
                </div>

                {% if not active_order_admin_cloud %}
                <a href="{% url 'buynow' admin_cloud.id %}">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>
                {% else %}
                <button
                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
                    Subscribed
                </button>
                {% endif %}

                <div class="w-full flex flex-col gap-3 mt-5">
                    <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="font-light text-secondosiblue">5 cPanel Accounts</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="font-light text-secondosiblue">For Cloud VPS Only</p>
                        </div>
                    </div>
                </div>
            </div>

            <div
                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_pro_cloud %} bg-black bg-opacity-20 {% endif %}">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Pro Cloud</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$31/month</p>
                </div>

                {% if not active_order_pro_cloud %}
                <a href="{% url 'buynow' pro_cloud.id %}">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>
                {% else %}
                <button
                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
                    Subscribed
                </button>
                {% endif %}

                <div class="w-full flex flex-col gap-3 mt-5">
                    <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="font-light text-secondosiblue">30 cPanel Accounts</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="font-light text-secondosiblue">For Cloud VPS Only</p>
                        </div>
                    </div>
                </div>
            </div>

            <div
                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_premier_cloud %} bg-black bg-opacity-20 {% endif %}">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Premier Cloud</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$42/month</p>
                </div>

                {% if not active_order_premier_cloud %}
                <a href="{% url 'buynow' premier_cloud.id %}">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>
                {% else %}
                <button
                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
                    Subscribed</button>
                {% endif %}


                <div class="w-full flex flex-col gap-3 mt-5">
                    <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="font-light text-secondosiblue">100 cPanel Accounts</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="font-light text-secondosiblue">For Cloud VPS Only</p>
                        </div>
                    </div>
                </div>
            </div>

            <div
                class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_premier_metal %} bg-black bg-opacity-20 {% endif %}">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Premier Metal</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$42/month</p>
                </div>

                {% if not active_order_premier_metal %}
                <a href="{% url 'buynow' premier_metal.id %}">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>
                {% else %}
                <button
                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
                    Subscribed</button>
                {% endif %}


                <div class="w-full flex flex-col gap-3 mt-5">
                    <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="font-light text-secondosiblue">100 cPanel Accounts</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="font-light text-secondosiblue">For Cloud VPS Only, Metal Server</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!---------------------- JS SCRIPTS -------------------->
<script type="text/javascript" src='{% static "js/customer_dashboard/pricing-dropdown.js" %}'></script>

{% endblock %}