{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="row">
  <h2 class="mb-7">Pricing</h2>
  <div class="row">
    <div class="col-xl-12 col-xxl-9 mb-1">
      <div class="tabs mb-7">
        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-month" role="tabpanel" aria-labelledby="pills-month-tab">
            <div class="row g-3">
                {% for plan in plans %}
                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                        <div class="h-100">
                            <input class="card-form-check-input d-none"
                                   type="radio"
                                   name="pricingMonthly"
                                   id="subscription_{{ plan.id }}"
                                   checked="checked" />
                            <div class="position-relative h-100">
                                <label class="stretched-link" for="subscription_{{ plan.id }}"></label>
                                <div class="card h-100 overflow-hidden cursor-pointer">
                                    <div class="bg-holder d-dark-none"
                                         style="background-image:url({% static 'images/bg/8.png' %});background-position:left bottom;background-size:auto;bottom:-1px;">
                                    </div>
                                    <div class="bg-holder d-light-none"
                                         style="background-image:url({% static 'images/bg/8-dark.png' %});background-position:left bottom;background-size:auto;bottom:-1px;">
                                    </div>
                                    <div class="card-body d-flex flex-column justify-content-between position-relative">
                    <div class="d-flex justify-content-between">
                      <div class="mb-5 mb-md-0 mb-lg-5 me-3">
                        <div class="d-sm-flex align-items-center mb-3">
                          <h3 class="mb-0">{{ plan.name }}</h3>
                        </div>
                        <p class="fs-9 text-body-tertiary">For individuals who are interested
                            <br> in giving it a shot first.
                        </p>
                        <div class="d-flex align-items-end mb-md-5 mb-lg-0">
                          <h4 class="fw-bolder me-1">{{ plan.price|floatformat }} {% trans 'SAR' %}</h4>
                          <h5 class="fs-9 fw-normal text-body-tertiary ms-1">{{ _("Per month")}}</h5>
                        </div>
                      </div>
                        <img class="d-dark-none opacity-50"
                             src="{% static 'images/spot-illustrations/dark_21.png' %}"
                             width="auto"
                             height="120"
                             alt=""  />
                      <img class="d-light-none opacity-50"
                           src="{% static 'images/spot-illustrations/21.png' %}"
                           width="auto"
                           height="120"
                           alt="" />
                    </div>
                    <div class="row flex-1 justify-content-end">
                      <div class="col-sm-8 col-md-12">
                        <div class="d-sm-flex d-md-block d-lg-flex justify-content-end align-items-end h-100">
                          <ul class="list-unstyled mb-0 border-start-sm border-start-md-0 border-start-lg ps-sm-5 ps-md-0 ps-lg-5 border-translucent">
                            <li class="d-flex align-items-center">
                                <span class="uil uil-check-circle text-success me-2"></span>
                                <span class="text-body-tertiary fw-semibold">{{ _("Max Users")}}: {{ plan.max_users }}</span>
                            </li>
                            <li class="d-flex align-items-center">
                                <span class="uil uil-check-circle text-success me-2"></span>
                                <span class="text-body-tertiary fw-semibold">{{ _("Inventory Size")}}: {{ plan.max_inventory_size }}</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
                  </div>
                {% endfor %}
            </div>
          </div>
        </div>

      </div>
      <div>
        <div class="d-grid d-sm-flex">
          <button class="btn btn-lg btn-phoenix-primary d-sm-flex align-items-center mb-3 mb-sm-0 me-sm-3 px-sm-8">{{ _("Subscribe") }}
              {{ _("Now") }}<span class="fas fa-angle-right ms-1"></span>
          </button>
        </div>
      </div>
    </div>
    <div class="col col-xxl-3 mt-8">
      <h3 class="fw-semibold mb-3">Included in our all packages</h3>
      <div class="row">
        <div class="col-md-6 col-xxl-12">
          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3"><span class="fas fa-check text-primary me-3 fs-9"></span>
            <p class="mb-0 text-body-secondary">Timeline</p>
          </div>
        </div>
        <div class="col-md-6 col-xxl-12">
          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
              <span class="fas fa-check text-primary me-3 fs-9"></span>
            <p class="mb-0 text-body-secondary">Advanced Search</p>
          </div>
        </div>
        <div class="col-md-6 col-xxl-12">
          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
              <span class="fas fa-check text-primary me-3 fs-9"></span>
            <p class="mb-0 text-body-secondary">Custom fields</p>
              <span class="badge badge-phoenix badge-phoenix-primary ms-2">New</span>
          </div>
        </div>
        <div class="col-md-6 col-xxl-12">
          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
              <span class="fas fa-check text-primary me-3 fs-9"></span>
            <p class="mb-0 text-body-secondary">Task dependencies</p>
          </div>
        </div>
        <div class="col-md-6 col-xxl-12">
          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
              <span class="fas fa-check text-primary me-3 fs-9"></span>
            <p class="mb-0 text-body-secondary">20TB of additional space </p>
          </div>
        </div>
        <div class="col-md-6 col-xxl-12">
          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
              <span class="fas fa-check text-primary me-3 fs-9"></span>
            <p class="mb-0 text-body-secondary">Bandwidth of Upto 1 Gbps</p>
          </div>
        </div>
        <div class="col-md-6 col-xxl-12">
          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
              <span class="fas fa-check text-primary me-3 fs-9"></span>
            <p class="mb-0 text-body-secondary">Private teams & projects</p>
          </div>
        </div>
        <div class="col-md-6 col-xxl-12">
          <div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
              <span class="fas fa-check text-primary me-3 fs-9"></span>
            <p class="mb-0 text-body-secondary">Customer Support and Training</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}