{% extends "layout/layout.html" %} {% set page_title = "Billing" %} {% block
content %}

<main class="app-wrapper">
  {% include "../templates/layout/header-footer/app-header.html" %} {% include
  "../templates/layout/header-footer/app-sidebar.html" %} {% include
  "../templates/layout/header-footer/topnavbar.html" %}
  <div class="content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 rt-mb-25">
            {% include "../templates/components/breadcrumbs/breadcrumbs.html" %}
          </div>
        </div>
        <div class="row">
          <div class="col-xxl-5">
            <div class="billing-column black-box min-h-275">
              <h5>Current subscription plans</h5>
              <div class="primium-content">
                <img src="assets/images/all-img/plane.png" alt="" /> Premium
              </div>
              <p>
                Premium monthly subscription plan active since:
                <span>Apr 16, 2021</span>
              </p>
              <button type="button" class="btn btn-secondary pill">
                Upgrade Plans
              </button>
            </div>
          </div>
          <div class="col-xxl-3 col-xl-6 col-lg-12 col-md-6">
            <div class="billing-column min-h-275">
              <div class="billing-invoice-wrap">
                <div class="billing-invoice-content">
                  <p>Next invoice</p>
                  <h3>$149.00</h3>
                  <h4>
                    <img
                      src="assets/images/svg/alarm.svg"
                      alt=""
                      class="rt-mr-8"
                    />
                    On May, 2021
                  </h4>
                  <button type="button" class="btn btn-primary pill btn-icon">
                    <span class="button-content-wrapper">
                      <span class="button-icon align-icon-right">
                        <i class="ph-arrow-right"></i>
                      </span>
                      <span class="button-text"> Pay Now </span>
                    </span>
                  </button>
                </div>
                <div class="card-aligned__icon">
                  <svg
                    width="32"
                    height="32"
                    viewBox="0 0 32 32"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      class="color-white"
                      opacity="0.2"
                      d="M3.99976 23.9999L3.99976 23.9998L3.99909 13.1064H27.9991L27.9998 23.9999L3.99976 23.9999Z"
                      fill="#005CE8"
                      stroke="#005CE8"
                      stroke-width="2"
                    />
                    <path
                      d="M28 7H4C3.44772 7 3 7.44772 3 8V24C3 24.5523 3.44772 25 4 25H28C28.5523 25 29 24.5523 29 24V8C29 7.44772 28.5523 7 28 7Z"
                      stroke="#005CE8"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M20.999 21H24.999"
                      stroke="#005CE8"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M14.999 21H16.999"
                      stroke="#005CE8"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M2.99902 12.1064H28.999"
                      stroke="#005CE8"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xxl-4 col-xl-6 col-lg-12 col-md-6">
            <div class="billing-column min-h-275">
              <div class="billing-curent-plane">
                <h5>Current Plans Benefits</h5>
                <p>
                  Aenean efficitur euismod elementum. Donec ullamcorper pretium
                  tempus.
                </p>
              </div>
              <div class="billing-curent-plane-benefits">
                <ul>
                  <li>
                    <img src="assets/images/svg/check.svg" alt="" />Upgrade
                    Profile
                  </li>
                  <li>
                    <img src="assets/images/svg/check.svg" alt="" />Multi-shot &
                    video
                  </li>
                  <li>
                    <img src="assets/images/svg/check.svg" alt="" />Instant
                    creative portfolio
                  </li>
                  <li>
                    <img src="assets/images/svg/check.svg" alt="" />Sell goods
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">Payment Method</div>
          <div class="card-body">
            <div class="payment-card-column">
              <div
                class="payment-card-wrap"
                style="
                  background-image: url(assets/images/all-img/card-bg1.png);
                "
              >
                <div class="payment-card-header">
                  <h4>$95, 400.00 <span>USD</span></h4>
                  <img src="assets/images/svg/visa.svg" alt="" />
                </div>
                <div class="payment-card-number">
                  <div class="payment-card-number-left">
                    <p id="textToCopy">**** **** **** 3814</p>
                    <button id="copyButton">
                      <img src="assets/images/svg/copy.svg" alt="" />
                    </button>
                  </div>
                  <div class="payment-card-number-right">
                    <p>Expires</p>
                    <h5>04 / 24</h5>
                  </div>
                </div>
                <div class="payment-card-footer">
                  <p>Kevin Gilbert</p>
                  <div class="card-dropdown">
                    <button
                      class="dots-btn"
                      id="dropdownMenuButton5"
                      data-bs-toggle="dropdown"
                    >
                      <img src="assets/images/svg/dots.svg" alt="" />
                    </button>
                    <ul
                      class="dropdown-menu"
                      aria-labelledby="dropdownMenuButton5"
                    >
                      <li><a class="dropdown-item" href="#">Download</a></li>
                      <li><a class="dropdown-item" href="#">Print</a></li>
                      <li>
                        <a class="dropdown-item delete-content" href="#"
                          >Delete</a
                        >
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- end card one -->
              <div
                class="payment-card-wrap"
                style="
                  background-image: url(assets/images/all-img/card-bg2.png);
                "
              >
                <div class="payment-card-header header2">
                  <h4>$95, 400.00 <span>USD</span></h4>
                  <img src="assets/images/svg/visa2.svg" alt="" />
                </div>
                <div class="payment-card-number">
                  <div class="payment-card-number-left">
                    <p id="textToCopy2">**** **** **** 5468</p>
                    <button id="copyButton2">
                      <img src="assets/images/svg/copy.svg" alt="" />
                    </button>
                  </div>
                  <div class="payment-card-number-right">
                    <p>Expires</p>
                    <h5>04 / 24</h5>
                  </div>
                </div>
                <div class="payment-card-footer">
                  <p>Kevin Gilbert</p>
                  <div class="card-dropdown">
                    <button
                      class="dots-btn"
                      id="dropdownMenuButton6"
                      data-bs-toggle="dropdown"
                    >
                      <img src="assets/images/svg/dots.svg" alt="" />
                    </button>
                    <ul
                      class="dropdown-menu"
                      aria-labelledby="dropdownMenuButton6"
                    >
                      <li><a class="dropdown-item" href="#">Download</a></li>
                      <li><a class="dropdown-item" href="#">Print</a></li>
                      <li>
                        <a class="dropdown-item delete-content" href="#"
                          >Delete</a
                        >
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- end card two -->
              <div
                class="payment-card-add"
                data-bs-toggle="modal"
                data-bs-target="#exampleModal"
              >
                <img src="assets/images/svg/pluscircle.svg" alt="" />
                <p>Add new card</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header border-0">Payment History</div>
          <div class="payment-history-list table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th>NO.</th>
                  <th>Invoice Date</th>
                  <th>Date Paid</th>
                  <th>Status</th>
                  <th>Payment Method</th>
                  <th>Subscription</th>
                  <th>Amount</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>EKG464SJFN17</td>
                  <td>10 Dec, 2021</td>
                  <td>10 Dec, 2021</td>
                  <td>
                    <button
                      type="button"
                      class="btn btn-primary2 pill small-btn"
                    >
                      Button
                    </button>
                  </td>
                  <td>0077 **** **** 3814 (Visa)</td>
                  <td>Premium (Yearly)</td>
                  <td>$129.99 USD</td>
                  <td>
                    <div class="dropdown-wrap">
                      <button
                        type="button"
                        class="btn bg-primary-50 rounded-circle icon-btn"
                        id="dropdownMenuButton7"
                        data-bs-toggle="dropdown"
                      >
                        <svg
                          width="4"
                          height="16"
                          viewBox="0 0 4 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                            fill="#191B1C"
                            stroke="#191B1C"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                      <ul
                        class="dropdown-menu"
                        aria-labelledby="dropdownMenuButton7"
                      >
                        <li>
                          <a class="dropdown-item" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6.71875 8.5946L10 11.875L13.2812 8.5946"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M10 3.125V11.8727"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M16.875 11.875V16.25C16.875 16.4158 16.8092 16.5747 16.6919 16.6919C16.5747 16.8092 16.4158 16.875 16.25 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V11.875"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>

                            Download
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M4.99951 6.25V3.125H14.9995V6.25"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M14.9995 11.875H4.99951V17.1875H14.9995V11.875Z"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M4.99951 13.75H2.18701V7.5C2.18701 6.80964 2.79329 6.25 3.54118 6.25H16.4578C17.2057 6.25 17.812 6.80964 17.812 7.5V13.75H14.9995"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M14.6875 10C15.2053 10 15.625 9.58027 15.625 9.0625C15.625 8.54473 15.2053 8.125 14.6875 8.125C14.1697 8.125 13.75 8.54473 13.75 9.0625C13.75 9.58027 14.1697 10 14.6875 10Z"
                                fill="#626C70"
                              />
                            </svg>

                            Print
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item delete-content" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M16.875 4.375L3.125 4.37501"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M8.125 8.125V13.125"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M11.875 8.125V13.125"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>

                            Delete
                          </a>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>EKG464SJFN17</td>
                  <td>10 Dec, 2021</td>
                  <td>10 Dec, 2021</td>
                  <td>
                    <button
                      type="button"
                      class="btn btn-success2 pill small-btn small-btn2"
                    >
                      Completed
                    </button>
                  </td>
                  <td>0077 **** **** 3814 (Visa)</td>
                  <td>Premium (Yearly)</td>
                  <td>$129.99 USD</td>
                  <td>
                    <div class="dropdown-wrap">
                      <button
                        type="button"
                        class="btn bg-primary-50 rounded-circle icon-btn"
                        id="dropdownMenuButton2"
                        data-bs-toggle="dropdown"
                      >
                        <svg
                          width="4"
                          height="16"
                          viewBox="0 0 4 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                            fill="#191B1C"
                            stroke="#191B1C"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                      <ul
                        class="dropdown-menu"
                        aria-labelledby="dropdownMenuButton2"
                      >
                        <li>
                          <a class="dropdown-item" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6.71875 8.5946L10 11.875L13.2812 8.5946"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M10 3.125V11.8727"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M16.875 11.875V16.25C16.875 16.4158 16.8092 16.5747 16.6919 16.6919C16.5747 16.8092 16.4158 16.875 16.25 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V11.875"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>

                            Download
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M4.99951 6.25V3.125H14.9995V6.25"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M14.9995 11.875H4.99951V17.1875H14.9995V11.875Z"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M4.99951 13.75H2.18701V7.5C2.18701 6.80964 2.79329 6.25 3.54118 6.25H16.4578C17.2057 6.25 17.812 6.80964 17.812 7.5V13.75H14.9995"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M14.6875 10C15.2053 10 15.625 9.58027 15.625 9.0625C15.625 8.54473 15.2053 8.125 14.6875 8.125C14.1697 8.125 13.75 8.54473 13.75 9.0625C13.75 9.58027 14.1697 10 14.6875 10Z"
                                fill="#626C70"
                              />
                            </svg>

                            Print
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item delete-content" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M16.875 4.375L3.125 4.37501"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M8.125 8.125V13.125"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M11.875 8.125V13.125"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>

                            Delete
                          </a>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>EKG464SJFN17</td>
                  <td>10 Dec, 2021</td>
                  <td>10 Dec, 2021</td>
                  <td>
                    <button
                      type="button"
                      class="btn btn-success2 pill small-btn small-btn2"
                    >
                      Completed
                    </button>
                  </td>
                  <td>0077 **** **** 3814 (Visa)</td>
                  <td>Premium (Yearly)</td>
                  <td>$129.99 USD</td>
                  <td>
                    <div class="dropdown-wrap">
                      <button
                        type="button"
                        class="btn bg-primary-50 rounded-circle icon-btn"
                        id="dropdownMenuButton3"
                        data-bs-toggle="dropdown"
                      >
                        <svg
                          width="4"
                          height="16"
                          viewBox="0 0 4 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                            fill="#191B1C"
                            stroke="#191B1C"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                      <ul
                        class="dropdown-menu"
                        aria-labelledby="dropdownMenuButton3"
                      >
                        <li>
                          <a class="dropdown-item" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6.71875 8.5946L10 11.875L13.2812 8.5946"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M10 3.125V11.8727"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M16.875 11.875V16.25C16.875 16.4158 16.8092 16.5747 16.6919 16.6919C16.5747 16.8092 16.4158 16.875 16.25 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V11.875"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>

                            Download
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M4.99951 6.25V3.125H14.9995V6.25"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M14.9995 11.875H4.99951V17.1875H14.9995V11.875Z"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M4.99951 13.75H2.18701V7.5C2.18701 6.80964 2.79329 6.25 3.54118 6.25H16.4578C17.2057 6.25 17.812 6.80964 17.812 7.5V13.75H14.9995"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M14.6875 10C15.2053 10 15.625 9.58027 15.625 9.0625C15.625 8.54473 15.2053 8.125 14.6875 8.125C14.1697 8.125 13.75 8.54473 13.75 9.0625C13.75 9.58027 14.1697 10 14.6875 10Z"
                                fill="#626C70"
                              />
                            </svg>

                            Print
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item delete-content" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M16.875 4.375L3.125 4.37501"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M8.125 8.125V13.125"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M11.875 8.125V13.125"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>

                            Delete
                          </a>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>EKG464SJFN17</td>
                  <td>10 Dec, 2021</td>
                  <td>10 Dec, 2021</td>
                  <td>
                    <button
                      type="button"
                      class="btn btn-success2 pill small-btn small-btn2"
                    >
                      Completed
                    </button>
                  </td>
                  <td>0077 **** **** 3814 (Visa)</td>
                  <td>Premium (Yearly)</td>
                  <td>$129.99 USD</td>
                  <td>
                    <div class="dropdown-wrap">
                      <button
                        type="button"
                        class="btn bg-primary-50 rounded-circle icon-btn"
                        id="dropdownMenuButton4"
                        data-bs-toggle="dropdown"
                      >
                        <svg
                          width="4"
                          height="16"
                          viewBox="0 0 4 16"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M2 1.25C2.41421 1.25 2.75 1.58579 2.75 2C2.75 2.41421 2.41421 2.75 2 2.75C1.58579 2.75 1.25 2.41421 1.25 2C1.25 1.58579 1.58579 1.25 2 1.25ZM2 7.25C2.41421 7.25 2.75 7.58579 2.75 8C2.75 8.41421 2.41421 8.75 2 8.75C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25ZM2 13.25C2.41421 13.25 2.75 13.5858 2.75 14C2.75 14.4142 2.41421 14.75 2 14.75C1.58579 14.75 1.25 14.4142 1.25 14C1.25 13.5858 1.58579 13.25 2 13.25Z"
                            fill="#191B1C"
                            stroke="#191B1C"
                            stroke-width="1.5"
                          />
                        </svg>
                      </button>
                      <ul
                        class="dropdown-menu"
                        aria-labelledby="dropdownMenuButton4"
                      >
                        <li>
                          <a class="dropdown-item" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M6.71875 8.5946L10 11.875L13.2812 8.5946"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M10 3.125V11.8727"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M16.875 11.875V16.25C16.875 16.4158 16.8092 16.5747 16.6919 16.6919C16.5747 16.8092 16.4158 16.875 16.25 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V11.875"
                                stroke="white"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>

                            Download
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M4.99951 6.25V3.125H14.9995V6.25"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M14.9995 11.875H4.99951V17.1875H14.9995V11.875Z"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M4.99951 13.75H2.18701V7.5C2.18701 6.80964 2.79329 6.25 3.54118 6.25H16.4578C17.2057 6.25 17.812 6.80964 17.812 7.5V13.75H14.9995"
                                stroke="#626C70"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M14.6875 10C15.2053 10 15.625 9.58027 15.625 9.0625C15.625 8.54473 15.2053 8.125 14.6875 8.125C14.1697 8.125 13.75 8.54473 13.75 9.0625C13.75 9.58027 14.1697 10 14.6875 10Z"
                                fill="#626C70"
                              />
                            </svg>

                            Print
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item delete-content" href="#">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M16.875 4.375L3.125 4.37501"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M8.125 8.125V13.125"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M11.875 8.125V13.125"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375"
                                stroke="#E84646"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>

                            Delete
                          </a>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        {% include "../templates/layout/header-footer/footer.html" %}
      </div>
    </div>
  </div>
</main>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="card m-0">
        <div class="card-header">Add new Card</div>
        <div class="card-body">
          <form action="#">
            <div class="fromGroup mb-3">
              <label>Card Number</label>
              <input
                class="form-control" id="credit-card-number"
                type="text"
                placeholder="card number..."
              />
            </div>
            <div class="fromGroup mb-3">
              <label>Name on Card</label>
              <input class="form-control" type="text" placeholder="Name" />
            </div>
            <div class="row">
              <div class="col-lg-6">
                <div class="fromGroup mb-3">
                  <label>CVC</label>
                  <input
                    class="form-control"
                    type="password"
                    placeholder="..."
                  />
                </div>
              </div>
              <div class="col-lg-6">
                <div class="fromGroup mb-3">
                  <label>Expire Date</label>
                  <input
                    class="form-control"
                    type="text"
                    placeholder="MM / YY"
                  />
                </div>
              </div>
            </div>
            <div class="billing-modal-footer">
              <button
                type="button"
                class="btn btn-dark2 pill"
                data-bs-dismiss="modal"
              >
                Cancel
              </button>
              <button
                type="button"
                class="btn btn-primary pill btn-icon"
                data-bs-toggle="modal"
                data-bs-target="#exampleModal"
              >
                <span class="button-content-wrapper">
                  <span class="button-text"> Add Card </span>
                  <span class="button-icon">
                    <img src="assets/images/svg/plus.svg" alt="" />
                  </span>
                </span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}