{% 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 }} <span class="icon-saudi_riyal"></span></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 %}