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

{% block content %}

<div class="row">


      <section class="pt-5 pb-9">

        <div class="row-small">

          <div class="row align-items-center justify-content-between g-3 mb-4">
            <div class="col-auto">
              <h2 class="mb-0">{% trans 'Profile' %}</h2>
            </div>
            <div class="col-auto">
              <div class="row g-2 g-sm-3">

                <div class="col-auto">
                  <a href="{% url 'account_change_password' %}" class="btn btn-phoenix-danger"><span class="fas fa-key me-2"></span>{{ _("Change Password") }}</a>
                </div>
                  <div class="col-auto">
                      <a class="btn btn-phoenix-secondary " href="{% url 'dealer_update' dealer.pk %}"><span class="fas fa-edit me-2 text-body-quaternary"></span>{{ _("Edit") }} </a>
                  </div>
              </div>
            </div>
          </div>
          <div class="row g-3">
            <div class="col-12 col-lg-8">
              <div class="card h-100">
                <div class="card-body">
                  <div class="border-bottom border-dashed pb-4">
                    <div class="row align-items-center g-3 g-sm-5 text-center text-sm-start">
                      <div class="col-12 col-sm-auto">
                        <input class="d-none" id="avatarFile" type="file" />
                        <label class="cursor-pointer avatar avatar-5xl" for="avatarFile">
                            {% if dealer.logo %}
                            <img src="{{ dealer.logo.url }}" alt="{{ dealer.get_local_name }}" class="rounded-circle" style="max-width: 150px;">
                        {% else %}
                                <span class="rounded-circle feather feather-user text-body-tertiary" style="max-width: 150px;"></span>
                            <img src="{% static 'images/logos/logo.png' %}" alt="{{ dealer.get_local_name }}" class="" style="max-width: 150px;">
                        {% endif %}
                        </label>
                      </div>
                      <div class="col-12 col-sm-auto flex-1">
                        <h3>{{ dealer.get_local_name }}</h3>
                        <p class="text-body-secondary">{% trans 'Joined' %} {{ dealer.joined_at|timesince}} {% trans 'ago' %}</p>
                        <div></div>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex flex-between-center pt-4">
                    <div>
                      <h6 class="mb-2 text-body-secondary">{% trans 'last login'|capfirst %}</h6>
                      <h4 class="fs-7 text-body-highlight mb-0">{{ dealer.user.last_login|date:"D M d, Y H:i" }}</h4>
                    </div>
                    <div class="text-end">
                      <h6 class="mb-2 text-body-secondary">{% trans 'Total users'|capfirst %}</h6>
                      <h4 class="fs-7 text-body-highlight mb-0">{{ dealer.staff_count }} / {{ allowed_users }}</h4>
                    </div>
                    <div class="text-end">
                      <h6 class="mb-2 text-body-secondary">{% trans 'Subscription' %}</h6>
                        {% if dealer.user.userplan.active %}
                        <span class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="badge-label">{% trans 'Active' %}</span><span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span></span>
                        {% else %}
                        <span class="badge badge-phoenix fs-10 badge-phoenix-danger"><span class="badge-label">{% trans 'Expired' %}</span><span class="ms-1" data-feather="times" style="height:12.8px;width:12.8px;"></span></span>
                        {% endif %}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-12 col-lg-4">
              <div class="card h-100">
                <div class="card-body">
                  <div class="border-bottom border-dashed">
                    <h4 class="mb-3">{% trans 'Default Address' %}</h4>
                  </div>
                  <div class="pt-4 mb-7 mb-lg-4 mb-xl-7">
                    <div class="row justify-content-between">
                      <div class="col-auto">
                        <h5 class="text-body-highlight">{% trans 'Address' %}</h5>
                      </div>
                      <div class="col-auto">
                        <p class="text-body-secondary">{{ dealer.address}}</p>
                      </div>
                    </div>
                  </div>
                  <div class="border-top border-dashed pt-4">
                    <div class="row flex-between-center mb-2">
                      <div class="col-auto">
                        <h5 class="text-body-highlight mb-0">{% trans 'Email' %}</h5>
                      </div>
                      <div class="col-auto">{{dealer.user.email}}</div>
                    </div>
                    <div class="row flex-between-center">
                      <div class="col-auto">
                        <h5 class="text-body-highlight mb-0">{% trans 'Phone' %}</h5>
                      </div>
                      <div class="col-auto">{{ dealer.phone_number }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          <div class="row g-3">
              <div class="col-6 col-lg-6">
                  <div class="h-100">
                      <input class="card-form-check-input d-none pricing-plan-recommended" type="radio" name="pricingMonthly" id="businessPlus" />
                      <div class="position-relative h-100">
                          <label class="stretched-link" for="businessPlus"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer pricing-business-plus">
                              <div class="bg-holder d-dark-none" style="background-image:url({% static 'images/bg/8.png' %});background-position:left bottom;background-size:auto;">
                              </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;">
                              </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 d-md-block d-lg-flex align-items-center mb-3">
                                      <h3 class="mb-0">{{ dealer.user.userplan.plan|capfirst }}</h3><span class="badge ms-sm-3 ms-md-0 ms-lg-3 fs-10 text-bg-warning">{% trans 'most valuable'|upper %}</span>
                                    </div>
                                    <p class="fs-9 text-body-tertiary">{% trans 'Active until' %}: {{ dealer.user.userplan.expire}}</p>
                                    <div class="d-flex align-items-end mb-md-5 mb-lg-0">
                                      <h4 class="fw-bolder me-1">{{ dealer.user.userplan.plan.planpricing_set.first.price }} {% trans 'SAR' %}</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Per month</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="{% static 'images/spot-illustrations/star.png' %}" width="54" height="54" alt="" /><img class="d-light-none" src="{% static 'images/spot-illustrations/star-dark.png' %}" width="54" height="54" 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">
                                      <div 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-warning-subtle">
                                          <div class="d-flex align-items-center"><span class="uil uil-check-circle text-success me-2"></span><span class="text-body-tertiary fw-semibold">{{ dealer.user.userplan.plan.description}}</span></div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
              </div>
              <div class="col-6 col-lg-6">
                  <div class="row align-items-center g-4">
                <div class="col-12 col-md-auto">
                  <div class="d-flex align-items-center"><span class="fa-stack" style="min-height: 46px;min-width: 46px;"><svg class="svg-inline--fa fa-square fa-stack-2x dark__text-opacity-50 text-success-light" data-fa-transform="down-4 rotate--10 left-4" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="" style="transform-origin: 0.1875em 0.75em;"><g transform="translate(224 256)"><g transform="translate(-128, 128)  scale(1, 1)  rotate(-10 0 0)"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z" transform="translate(-224 -256)"></path></g></g></svg><!-- <span class="fa-solid fa-square fa-stack-2x dark__text-opacity-50 text-success-light" data-fa-transform="down-4 rotate--10 left-4"></span> Font Awesome fontawesome.com --><svg class="svg-inline--fa fa-circle fa-stack-2x stack-circle text-stats-circle-success" data-fa-transform="up-4 right-3 grow-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="transform-origin: 0.6875em 0.25em;"><g transform="translate(256 256)"><g transform="translate(96, -128)  scale(1.125, 1.125)  rotate(0 0 0)"><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" transform="translate(-256 -256)"></path></g></g></svg><!-- <span class="fa-solid fa-circle fa-stack-2x stack-circle text-stats-circle-success" data-fa-transform="up-4 right-3 grow-2"></span> Font Awesome fontawesome.com --><svg class="svg-inline--fa fa-star fa-stack-1x text-success" data-fa-transform="shrink-2 up-8 right-6" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="" style="transform-origin: 0.9375em 0em;"><g transform="translate(288 256)"><g transform="translate(192, -256)  scale(0.875, 0.875)  rotate(0 0 0)"><path fill="currentColor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" transform="translate(-288 -256)"></path></g></g></svg><!-- <span class="fa-stack-1x fa-solid fa-star text-success " data-fa-transform="shrink-2 up-8 right-6"></span> Font Awesome fontawesome.com --></span>
                    <div class="ms-3">
                      <h4 class="mb-0">57 new orders</h4>
                      <p class="text-body-secondary fs-9 mb-0">Awating processing</p>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="d-flex align-items-center"><span class="fa-stack" style="min-height: 46px;min-width: 46px;"><svg class="svg-inline--fa fa-square fa-stack-2x dark__text-opacity-50 text-warning-light" data-fa-transform="down-4 rotate--10 left-4" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="" style="transform-origin: 0.1875em 0.75em;"><g transform="translate(224 256)"><g transform="translate(-128, 128)  scale(1, 1)  rotate(-10 0 0)"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z" transform="translate(-224 -256)"></path></g></g></svg><!-- <span class="fa-solid fa-square fa-stack-2x dark__text-opacity-50 text-warning-light" data-fa-transform="down-4 rotate--10 left-4"></span> Font Awesome fontawesome.com --><svg class="svg-inline--fa fa-circle fa-stack-2x stack-circle text-stats-circle-warning" data-fa-transform="up-4 right-3 grow-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="transform-origin: 0.6875em 0.25em;"><g transform="translate(256 256)"><g transform="translate(96, -128)  scale(1.125, 1.125)  rotate(0 0 0)"><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" transform="translate(-256 -256)"></path></g></g></svg><!-- <span class="fa-solid fa-circle fa-stack-2x stack-circle text-stats-circle-warning" data-fa-transform="up-4 right-3 grow-2"></span> Font Awesome fontawesome.com --><svg class="svg-inline--fa fa-pause fa-stack-1x text-warning" data-fa-transform="shrink-2 up-8 right-6" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pause" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg="" style="transform-origin: 0.6875em 0em;"><g transform="translate(160 256)"><g transform="translate(192, -256)  scale(0.875, 0.875)  rotate(0 0 0)"><path fill="currentColor" d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z" transform="translate(-160 -256)"></path></g></g></svg><!-- <span class="fa-stack-1x fa-solid fa-pause text-warning " data-fa-transform="shrink-2 up-8 right-6"></span> Font Awesome fontawesome.com --></span>
                    <div class="ms-3">
                      <h4 class="mb-0">5 orders</h4>
                      <p class="text-body-secondary fs-9 mb-0">On hold</p>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-md-auto">
                  <div class="d-flex align-items-center"><span class="fa-stack" style="min-height: 46px;min-width: 46px;"><svg class="svg-inline--fa fa-square fa-stack-2x dark__text-opacity-50 text-danger-light" data-fa-transform="down-4 rotate--10 left-4" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="" style="transform-origin: 0.1875em 0.75em;"><g transform="translate(224 256)"><g transform="translate(-128, 128)  scale(1, 1)  rotate(-10 0 0)"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z" transform="translate(-224 -256)"></path></g></g></svg><!-- <span class="fa-solid fa-square fa-stack-2x dark__text-opacity-50 text-danger-light" data-fa-transform="down-4 rotate--10 left-4"></span> Font Awesome fontawesome.com --><svg class="svg-inline--fa fa-circle fa-stack-2x stack-circle text-stats-circle-danger" data-fa-transform="up-4 right-3 grow-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="transform-origin: 0.6875em 0.25em;"><g transform="translate(256 256)"><g transform="translate(96, -128)  scale(1.125, 1.125)  rotate(0 0 0)"><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" transform="translate(-256 -256)"></path></g></g></svg><!-- <span class="fa-solid fa-circle fa-stack-2x stack-circle text-stats-circle-danger" data-fa-transform="up-4 right-3 grow-2"></span> Font Awesome fontawesome.com --><svg class="svg-inline--fa fa-xmark fa-stack-1x text-danger" data-fa-transform="shrink-2 up-8 right-6" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="" style="transform-origin: 0.75em 0em;"><g transform="translate(192 256)"><g transform="translate(192, -256)  scale(0.875, 0.875)  rotate(0 0 0)"><path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" transform="translate(-192 -256)"></path></g></g></svg><!-- <span class="fa-stack-1x fa-solid fa-xmark text-danger " data-fa-transform="shrink-2 up-8 right-6"></span> Font Awesome fontawesome.com --></span>
                    <div class="ms-3">
                      <h4 class="mb-0">15 products</h4>
                      <p class="text-body-secondary fs-9 mb-0">Out of stock</p>
                    </div>
                  </div>
                </div>
              </div>
              </div>
          </div>
          </div>
<div class="pb-9">
          <h2 class="mb-7">Pricing</h2>
          <div class="row">
            <div class="col-xl-12 col-xxl-9 mb-1">
              <div class="tabs mb-7">
                <ul class="nav nav-underline fs-9 mb-3" id="nav-tab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-year-tab" data-bs-toggle="pill" data-bs-target="#pills-year" type="button" role="tab" aria-controls="pills-year" aria-selected="false">Yearly</button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-month-tab" data-bs-toggle="pill" data-bs-target="#pills-month" type="button" role="tab" aria-controls="pills-month" aria-selected="true">Monthly</button>
                  </li>
                </ul>
                <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">
                      <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="startup" checked="checked" />
                          <div class="position-relative h-100">
                            <label class="stretched-link" for="startup"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer">
                              <div class="bg-holder d-dark-none" style="background-image:url(../../assets/img/bg/8.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <div class="bg-holder d-light-none" style="background-image:url(../../assets/img/bg/8-dark.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <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">Startup</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">Free</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Forever</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="../../assets/img/spot-illustrations/rocket.png" width="54" height="54" alt="" /><img class="d-light-none" src="../../assets/img/spot-illustrations/rocket-dark.png" width="54" height="54" 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">Up to 4 Members</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">3 Collaboration projects</span></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <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="standard" />
                          <div class="position-relative h-100">
                            <label class="stretched-link" for="standard"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer">
                              <div class="bg-holder d-dark-none" style="background-image:url(../../assets/img/bg/9.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <div class="bg-holder d-light-none" style="background-image:url(../../assets/img/bg/9-dark.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <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">Standard</h3>
                                    </div>
                                    <p class="fs-9 text-body-tertiary">For teams that need to create <br> project plans with confidence.</p>
                                    <div class="d-flex align-items-end mb-md-5 mb-lg-0">
                                      <h4 class="fw-bolder me-1">$14.99</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Per month</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="../../assets/img/spot-illustrations/bag-2.png" width="54" height="54" alt="" /><img class="d-light-none" src="../../assets/img/spot-illustrations/bag-2-dark.png" width="54" height="54" 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">Up to 8 Members</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">Create & Share libraries</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">10 Collaboration projects</span></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <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 pricing-plan-recommended" type="radio" name="pricingMonthly" id="businessPlus" />
                          <div class="position-relative h-100">
                            <label class="stretched-link" for="businessPlus"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer bg-warning-subtle border-warning warning-boxshadow pricing-business-plus">
                              <div class="bg-holder d-dark-none" style="background-image:url(../../assets/img/bg/bg-11.png);background-position:left bottom;background-size:auto;">
                              </div>
                              <!--/.bg-holder-->

                              <div class="bg-holder d-light-none" style="background-image:url(../../assets/img/bg/bg-11-dark.png);background-position:left bottom;background-size:auto;">
                              </div>
                              <!--/.bg-holder-->

                              <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 d-md-block d-lg-flex align-items-center mb-3">
                                      <h3 class="mb-0">Business Plus</h3><span class="badge ms-sm-3 ms-md-0 ms-lg-3 text-uppercase fs-10 text-bg-warning">recommended</span>
                                    </div>
                                    <p class="fs-9 text-body-tertiary">For teams that need to manage <br> work across initiatives.</p>
                                    <div class="d-flex align-items-end mb-md-5 mb-lg-0">
                                      <h4 class="fw-bolder me-1">$49.99</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Per month</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="../../assets/img/spot-illustrations/star.png" width="54" height="54" alt="" /><img class="d-light-none" src="../../assets/img/spot-illustrations/star-dark.png" width="54" height="54" 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-warning-subtle">
                                        <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">Technical Supports</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">Up to 20 Members</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">Create & Share libraries</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"><span class="fw-bold">Unlimited</span> Collaboration</span></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <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="enterprise" />
                          <div class="position-relative h-100">
                            <label class="stretched-link" for="enterprise"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer">
                              <div class="bg-holder d-dark-none" style="background-image:url(../../assets/img/bg/10.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <div class="bg-holder d-light-none" style="background-image:url(../../assets/img/bg/10-dark.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <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">Enterprise</h3>
                                    </div>
                                    <p class="fs-9 text-body-tertiary">For organizations that need <br> additional security and support.</p>
                                    <div class="d-flex align-items-end mb-md-5 mb-lg-0">
                                      <h4 class="fw-bolder me-1">$149.99</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Per month</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="../../assets/img/spot-illustrations/shield-2.png" width="54" height="54" alt="" /><img class="d-light-none" src="../../assets/img/spot-illustrations/shield-2-dark.png" width="54" height="54" 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">24/7 VIP Support</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">Automated analytics</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"><span class="fw-bold">Unlimited</span> Members*</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">Create & Share libraries</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">Centralized billing</span></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-content" id="pills-tabContentYear">
                  <div class="tab-pane fade" id="pills-year" role="tabpanel" aria-labelledby="pills-year-tab">
                    <div class="row g-3">
                      <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="pricingYearly" id="startupYearly" checked="checked" />
                          <div class="position-relative h-100">
                            <label class="stretched-link" for="startupYearly"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer">
                              <div class="bg-holder d-dark-none" style="background-image:url(../../assets/img/bg/8.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <div class="bg-holder d-light-none" style="background-image:url(../../assets/img/bg/8-dark.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <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">Startup</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">Free</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Forever</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="../../assets/img/spot-illustrations/rocket.png" width="54" height="54" alt="" /><img class="d-light-none" src="../../assets/img/spot-illustrations/rocket-dark.png" width="54" height="54" 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">Up to 4 Members</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">3 Collaboration projects</span></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <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="pricingYearly" id="standardYearly" />
                          <div class="position-relative h-100">
                            <label class="stretched-link" for="standardYearly"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer">
                              <div class="bg-holder d-dark-none" style="background-image:url(../../assets/img/bg/9.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <div class="bg-holder d-light-none" style="background-image:url(../../assets/img/bg/9-dark.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <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">Standard</h3>
                                    </div>
                                    <p class="fs-9 text-body-tertiary">For teams that need to create <br> project plans with confidence.</p>
                                    <div class="d-flex align-items-end mb-md-5 mb-lg-0">
                                      <h4 class="fw-bolder me-1">$179.88</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Per year</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="../../assets/img/spot-illustrations/bag-2.png" width="54" height="54" alt="" /><img class="d-light-none" src="../../assets/img/spot-illustrations/bag-2-dark.png" width="54" height="54" 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">Up to 8 Members</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">Create & Share libraries</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">10 Collaboration projects</span></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <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 pricing-plan-recommended" type="radio" name="pricingYearly" id="businessPlusYearly" />
                          <div class="position-relative h-100">
                            <label class="stretched-link" for="businessPlusYearly"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer bg-warning-subtle border-warning warning-boxshadow pricing-business-plus">
                              <div class="bg-holder d-dark-none" style="background-image:url(../../assets/img/bg/bg-11.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <div class="bg-holder d-light-none" style="background-image:url(../../assets/img/bg/bg-11-dark.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <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">Business Plus</h3><span class="badge ms-sm-3 text-uppercase fs-10 text-bg-warning">recommended</span>
                                    </div>
                                    <p class="fs-9 text-body-tertiary">For teams that need to manage <br> work across initiatives.</p>
                                    <div class="d-flex align-items-end mb-md-5 mb-lg-0">
                                      <h4 class="fw-bolder me-1">$599.88</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Per year</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="../../assets/img/spot-illustrations/star.png" width="54" height="54" alt="" /><img class="d-light-none" src="../../assets/img/spot-illustrations/star-dark.png" width="54" height="54" 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">Technical Supports</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">Up to 20 Members</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">Create & Share libraries</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"><span class="fw-bold">Unlimited</span> Collaboration</span></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <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="pricingYearly" id="enterpriseYearly" />
                          <div class="position-relative h-100">
                            <label class="stretched-link" for="enterpriseYearly"></label>
                            <div class="card h-100 overflow-hidden cursor-pointer">
                              <div class="bg-holder d-dark-none" style="background-image:url(../../assets/img/bg/10.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <div class="bg-holder d-light-none" style="background-image:url(../../assets/img/bg/10-dark.png);background-position:left bottom;background-size:auto;bottom:-1px;">
                              </div>
                              <!--/.bg-holder-->

                              <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">Enterprise</h3>
                                    </div>
                                    <p class="fs-9 text-body-tertiary">For organizations that need <br> additional security and support.</p>
                                    <div class="d-flex align-items-end mb-md-5 mb-lg-0">
                                      <h4 class="fw-bolder me-1">$1,799.88</h4>
                                      <h5 class="fs-9 fw-normal text-body-tertiary ms-1">Per year</h5>
                                    </div>
                                  </div><img class="d-dark-none" src="../../assets/img/spot-illustrations/shield-2.png" width="54" height="54" alt="" /><img class="d-light-none" src="../../assets/img/spot-illustrations/shield-2-dark.png" width="54" height="54" 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">24/7 VIP Support</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">Automated analytics</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"><span class="fw-bold">Unlimited</span> Members*</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">Create & Share libraries</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">Centralized billing</span></li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <p class="mb-0">Business Starter, Business Standard, and Business Plus plans can be purchased for a maximum of 300 users. There is no <br class="d-none d-xl-block d-xxl-none" />maximum user limit for Enterprise plans.</p>
                <p class="fw-semibold">Phoenix customers may have access to additional features for a limited <br class="d-none d-sm-block d-lg-none" />promotional period.</p>
                <div class="d-grid d-sm-flex">
                  <button class="btn btn-lg btn-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>
                  <button class="btn btn-lg btn-outline-primary px-sm-7">Start 7 days free Trial</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>
        </div>
        <!-- end of .row-->

      </section>


</div>
    {% endblock %}