<nav class="table-menu w-dropdown-list" id="table-menu-list" role="menu">
    <button class="table-menu-item w-inline-block" aria-label="Delete Selected">
        <span class="table-menu-item-icon w-embed">

            <!-- Trash Icon SVG -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="3 6 5 6 21 6"></polyline>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                <line x1="10" y1="11" x2="10" y2="17"></line>
                <line x1="14" y1="11" x2="14" y2="17"></line>
            </svg>
        </span>
        <span class="table-menu-item-text">Delete Selected</span>
    </button>
    <button class="table-menu-item w-inline-block" aria-label="Export to CSV">
        <span class="table-menu-item-icon w-embed">
            <!-- Export Icon SVG -->
            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <polygon points="5 18 5 20 10.586 20 3 27.586 4.414 29 12 21.414 12 27 14 27 14 18 5 18"></polygon>
                <path d="M27,3H5A2,2,0,0,0,3,5V15H5V11H15v4h2V11H27v7H17v2H27v7H17v2H27a2,2,0,0,0,2-2V5A2,2,0,0,0,27,3Zm0,6H5V5H27Z"></path>
            </svg>
        </span>
        <span>Export to CSV</span>
    </button>
</nav>





<h2>Payment Methods</h2>
<div class="heading-wrapper">
    <h3 class="no-margin">Payment Method Issues</h3>
    <div class="notification">Attention Required</div>
</div>
<div class="subheading">There is an issue with one or more of your payment methods. Please update your payment information.</div>
<form id="payment-method-form" 
      name="paymentMethodForm" 
      data-name="paymentMethodForm" 
      method="post" 
      action="/update-payment-method" 
      aria-labelledby="payment-methods-heading">
    <div class="table-outline">
        <div class="table-scroll-container">
            <table class="table" role="table" aria-describedby="payment-methods-description">
                <thead class="table-head">
                    <tr class="table-header-row" role="row">
                        <th role="columnheader" scope="col">
                            <div class="table-cell-content">
                                <div class="table-heading">Invoice</div>
                                <div class="table-sort-button w-embed" role="button" tabindex="0" aria-label="Sort by Invoice">
                                    <!-- SVG Icon -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="Transparent_Rectangle" data-name="Transparent Rectangle" class="cls-1"></rect>
                                    </svg>
                                </div>
                            </div>
                        </th>
                        <th role="columnheader" scope="col">
                            <div class="table-cell-content">
                                <div class="table-heading">Expiry</div>
                                <div class="table-sort-button w-embed" role="button" tabindex="0" aria-label="Sort by Expiry Date">
                                    <!-- SVG Icon -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </div>
                            </div>
                        </th>
                        <th role="columnheader" scope="col">
                            <div class="table-cell-content grow">
                                <div class="table-heading">Issue</div>
                                <div class="table-sort-button w-embed" role="button" tabindex="0" aria-label="Sort by Issue">
                                    <!-- SVG Icon -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </div>
                            </div>
                        </th>
                        <th role="columnheader" scope="col">
                            <div class="table-cell-content">
                                <div class="table-heading">Affected Subscriptions</div>
                                <div class="table-sort-button w-embed" role="button" tabindex="0" aria-label="Sort by Affected Subscriptions">
                                    <!-- SVG Icon -->
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </div>
                            </div>
                        </th>
                        <th class="action-column" role="columnheader" scope="col"> </th>
                    </tr>
                </thead>
                <tbody class="table-body">
                    <tr class="table-row" role="row">
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-inline-icon w-embed" aria-hidden="true">
                                        <!-- SVG Icon -->
                                        <svg class="w-5 mr-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" aria-hidden="true" focusable="false">
                                            <path d="M0 432c0 26.5 21.5 48 48 48H528c26.5 0 48-21.5 48-48v-1.1H514.3l-31.9-35.1-31.9 35.1H246.8V267.1H181L262.7 82.4h78.6l28.1 63.2V82.4h97.2L483.5 130l17-47.6H576V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80V432zm440.4-21.7L482.6 364l42 46.3H576l-68-72.1 68-72.1H525.4l-42 46.7-41.5-46.7H390.5L458 338.6l-67.4 71.6V377.1h-83V354.9h80.9V322.6H307.6V300.2h83V267.1h-122V410.3H440.4zm96.3-72L576 380.2V296.9l-39.3 41.4zm-36.3-92l36.9-100.6V246.3H576V103H515.8l-32.2 89.3L451.7 103H390.5V246.1L327.3 103H276.1L213.7 246.3h43l11.9-28.7h65.9l12 28.7h82.7V146L466 246.3h34.4zM282 185.4l19.5-46.9 19.4 46.9H282z"></path>
                                        </svg>
                                    </div>
                                    <div class="table-data danger">xxxx xxxx xxxx 0123</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data danger">11 / 2024</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data danger">Declined</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">
                                        <a href="#" aria-label="View 1 affected subscription">1</a>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-row-action-button-container">
                                <button class="button small" 
                                        data-wait="Loading..." 
                                        aria-label="Update Card for xxxx xxxx xxxx 0123" 
                                        type="button">
                                    <span class="button-icon">
                                        <!-- SVG Icon -->
                                        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                                            <path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6Zm0,2v3H4V8ZM4,24V13H28V24Z" transform="translate(0 0)"></path>
                                            <rect x="6" y="20" width="10" height="2"></rect>
                                        </svg>
                                    </span>
                                    <span>Update Card</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr class="table-row" role="row">
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-inline-icon w-embed" aria-hidden="true">
                                        <!-- SVG Icon -->
                                        <svg class="w-5 mr-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" aria-hidden="true" focusable="false">
                                            <path d="M0 432c0 26.5 21.5 48 48 48H528c26.5 0 48-21.5 48-48v-1.1H514.3l-31.9-35.1-31.9 35.1H246.8V267.1H181L262.7 82.4h78.6l28.1 63.2V82.4h97.2L483.5 130l17-47.6H576V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80V432zm440.4-21.7L482.6 364l42 46.3H576l-68-72.1 68-72.1H525.4l-42 46.7-41.5-46.7H390.5L458 338.6l-67.4 71.6V377.1h-83V354.9h80.9V322.6H307.6V300.2h83V267.1h-122V410.3H440.4zm96.3-72L576 380.2V296.9l-39.3 41.4zm-36.3-92l36.9-100.6V246.3H576V103H515.8l-32.2 89.3L451.7 103H390.5V246.1L327.3 103H276.1L213.7 246.3h43l11.9-28.7h65.9l12 28.7h82.7V146L466 246.3h34.4zM282 185.4l19.5-46.9 19.4 46.9H282z"></path>
                                        </svg>
                                    </div>
                                    <div class="table-data danger">xxxx xxxx xxxx 0124</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data danger">12 / 2024</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left overflow">
                                    <div class="table-data danger">Credit Card Expired</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">
                                        <a href="#" aria-label="View 4 affected subscriptions">4</a>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-row-action-button-container">
                                <button class="button small" 
                                        data-wait="Loading..." 
                                        aria-label="Update Card for xxxx xxxx xxxx 0124" 
                                        type="button">
                                    <span class="button-icon">
                                        <!-- SVG Icon -->
                                        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                                            <path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6Zm0,2v3H4V8ZM4,24V13H28V24Z" transform="translate(0 0)"></path>
                                            <rect x="6" y="20" width="10" height="2"></rect>
                                        </svg>
                                    </span>
                                    <span>Update Card</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr class="table-row last-row" role="row">
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-inline-icon w-embed" aria-hidden="true">
                                        <!-- SVG Icon -->
                                        <svg class="w-5 mr-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" aria-hidden="true" focusable="false">
                                            <path d="M0 432c0 26.5 21.5 48 48 48H528c26.5 0 48-21.5 48-48v-1.1H514.3l-31.9-35.1-31.9 35.1H246.8V267.1H181L262.7 82.4h78.6l28.1 63.2V82.4h97.2L483.5 130l17-47.6H576V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80V432zm440.4-21.7L482.6 364l42 46.3H576l-68-72.1 68-72.1H525.4l-42 46.7-41.5-46.7H390.5L458 338.6l-67.4 71.6V377.1h-83V354.9h80.9V322.6H307.6V300.2h83V267.1h-122V410.3H440.4zm96.3-72L576 380.2V296.9l-39.3 41.4zm-36.3-92l36.9-100.6V246.3H576V103H515.8l-32.2 89.3L451.7 103H390.5V246.1L327.3 103H276.1L213.7 246.3h43l11.9-28.7h65.9l12 28.7h82.7V146L466 246.3h34.4zM282 185.4l19.5-46.9 19.4 46.9H282z"></path>
                                        </svg>
                                    </div>
                                    <div class="table-data danger">xxxx xxxx xxxx 1111</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data danger">12 / 2024</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left overflow">
                                    <div class="table-data danger">Credit Card Expired</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">
                                        <a href="#" aria-label="View 2 affected subscriptions">2</a>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell" role="cell">
                            <div class="table-row-action-button-container">
                                <button class="button small" 
                                        data-wait="Loading..." 
                                        aria-label="Update Card for xxxx xxxx xxxx 1111" 
                                        type="button">
                                    <span class="button-icon">
                                        <!-- SVG Icon -->
                                        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
                                            <path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6Zm0,2v3H4V8ZM4,24V13H28V24Z" transform="translate(0 0)"></path>
                                            <rect x="6" y="20" width="10" height="2"></rect>
                                        </svg>
                                    </span>
                                    <span>Update Card</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</form>

<div class="space-2rem"></div>
<h3>Default Payment Method</h3>
<div class="subheading">
    The following Payment Card will be set as the default for all new subscriptions.<br>
</div>
<form
      id="default-payment-method-form"
      name="defaultPaymentMethodForm"
      data-name="Default Payment Method Form"
      method="post"
      action="/update-payment-method"
      >
    <div class="w-layout-grid form-grid">
        <div id="w-node-_99dc8a30-64cd-4f76-3887-9d8eeca13098-25740dc9" class="form-field-container">
            <div class="field-label-container">
                <label for="primary-payment-card" class="field-label">Primary Payment Card</label>
                <div class="required-star">*</div>
            </div>
            <div data-delay="0" data-hover="false" class="dropdown w-dropdown">
                <div class="dropdown-closed w-dropdown-toggle">
                    <div class="w-icon-dropdown-toggle"></div>
                    <div class="dropdown-existing-data">
                        <div class="dropdown-option-simple-icon danger w-embed">
                            <svg fill="currentColor" height="512" width="512" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"></path>
                            </svg>
                        </div>
                        <div class="dropdown-option-simple-icon w-embed">
                            <svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-config-id="svg-inline15">
                                <path d="M470.1 231.3s7.6 37.2 9.3 45H446c3.3-8.9 16-43.5 16-43.5-.2 .3 3.3-9.1 5.3-14.9l2.8 13.4zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM152.5 331.2L215.7 176h-42.5l-39.3 106-4.3-21.5-14-71.4c-2.3-9.9-9.4-12.7-18.2-13.1H32.7l-.7 3.1c15.8 4 29.9 9.8 42.2 17.1l35.8 135h42.5zm94.4 .2L272.1 176h-40.2l-25.1 155.4h40.1zm139.9-50.8c.2-17.7-10.6-31.2-33.7-42.3-14.1-7.1-22.7-11.9-22.7-19.2 .2-6.6 7.3-13.4 23.1-13.4 13.1-.3 22.7 2.8 29.9 5.9l3.6 1.7 5.5-33.6c-7.9-3.1-20.5-6.6-36-6.6-39.7 0-67.6 21.2-67.8 51.4-.3 22.3 20 34.7 35.2 42.2 15.5 7.6 20.8 12.6 20.8 19.3-.2 10.4-12.6 15.2-24.1 15.2-16 0-24.6-2.5-37.7-8.3l-5.3-2.5-5.6 34.9c9.4 4.3 26.8 8.1 44.8 8.3 42.2 .1 69.7-20.8 70-53zM528 331.4L495.6 176h-31.1c-9.6 0-16.9 2.8-21 12.9l-59.7 142.5H426s6.9-19.2 8.4-23.3H486c1.2 5.5 4.8 23.3 4.8 23.3H528z"></path>
                            </svg>
                        </div>
                        <div class="dropdown-option-text">xxxx xxxx xxxx 1001</div>
                    </div>
                </div>
                <div class="dropdown-open w-dropdown-list">
                    <a href="#" class="w-dropdown-link dropdown-option-simple">
                        <div class="dropdown-option-selected-icon-container">
                            <div class="dropdown-option-selected-icon selected w-embed">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </div>
                        </div>
                        <div class="dropdown-option-simple-icon danger w-embed">
                            <svg fill="currentColor" height="512" width="512" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"></path>
                            </svg>
                        </div>
                        <div class="dropdown-option-simple-icon w-embed">
                            <svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-config-id="svg-inline15">
                                <path d="M470.1 231.3s7.6 37.2 9.3 45H446c3.3-8.9 16-43.5 16-43.5-.2 .3 3.3-9.1 5.3-14.9l2.8 13.4zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM152.5 331.2L215.7 176h-42.5l-39.3 106-4.3-21.5-14-71.4c-2.3-9.9-9.4-12.7-18.2-13.1H32.7l-.7 3.1c15.8 4 29.9 9.8 42.2 17.1l35.8 135h42.5zm94.4 .2L272.1 176h-40.2l-25.1 155.4h40.1zm139.9-50.8c.2-17.7-10.6-31.2-33.7-42.3-14.1-7.1-22.7-11.9-22.7-19.2 .2-6.6 7.3-13.4 23.1-13.4 13.1-.3 22.7 2.8 29.9 5.9l3.6 1.7 5.5-33.6c-7.9-3.1-20.5-6.6-36-6.6-39.7 0-67.6 21.2-67.8 51.4-.3 22.3 20 34.7 35.2 42.2 15.5 7.6 20.8 12.6 20.8 19.3-.2 10.4-12.6 15.2-24.1 15.2-16 0-24.6-2.5-37.7-8.3l-5.3-2.5-5.6 34.9c9.4 4.3 26.8 8.1 44.8 8.3 42.2 .1 69.7-20.8 70-53zM528 331.4L495.6 176h-31.1c-9.6 0-16.9 2.8-21 12.9l-59.7 142.5H426s6.9-19.2 8.4-23.3H486c1.2 5.5 4.8 23.3 4.8 23.3H528z"></path>
                            </svg>
                        </div>
                        <div class="dropdown-option-text">xxxx xxxx xxxx 1001</div>
                    </a>
                    <a href="#" class="w-dropdown-link dropdown-option-simple">
                        <div class="dropdown-option-selected-icon-container">
                            <div class="dropdown-option-selected-icon w-embed">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </div>
                        </div>
                        <div class="dropdown-option-simple-icon w-embed">
                            <svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-config-id="svg-inline15">
                                <path d="M470.1 231.3s7.6 37.2 9.3 45H446c3.3-8.9 16-43.5 16-43.5-.2 .3 3.3-9.1 5.3-14.9l2.8 13.4zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM152.5 331.2L215.7 176h-42.5l-39.3 106-4.3-21.5-14-71.4c-2.3-9.9-9.4-12.7-18.2-13.1H32.7l-.7 3.1c15.8 4 29.9 9.8 42.2 17.1l35.8 135h42.5zm94.4 .2L272.1 176h-40.2l-25.1 155.4h40.1zm139.9-50.8c.2-17.7-10.6-31.2-33.7-42.3-14.1-7.1-22.7-11.9-22.7-19.2 .2-6.6 7.3-13.4 23.1-13.4 13.1-.3 22.7 2.8 29.9 5.9l3.6 1.7 5.5-33.6c-7.9-3.1-20.5-6.6-36-6.6-39.7 0-67.6 21.2-67.8 51.4-.3 22.3 20 34.7 35.2 42.2 15.5 7.6 20.8 12.6 20.8 19.3-.2 10.4-12.6 15.2-24.1 15.2-16 0-24.6-2.5-37.7-8.3l-5.3-2.5-5.6 34.9c9.4 4.3 26.8 8.1 44.8 8.3 42.2 .1 69.7-20.8 70-53zM528 331.4L495.6 176h-31.1c-9.6 0-16.9 2.8-21 12.9l-59.7 142.5H426s6.9-19.2 8.4-23.3H486c1.2 5.5 4.8 23.3 4.8 23.3H528z"></path>
                            </svg>
                        </div>
                        <div class="dropdown-option-text">xxxx xxxx xxxx 1002</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="space-2rem"></div>

<h3>Payment Methods</h3>
<div class="subheading">Here, you can view, add, or remove your credit cards, ensuring full control over your payment options and security.</div>
<form id="payment-methods-form" name="paymentMethods" action="/payment-methods" method="GET">
    <div class="table-outline">
        <div class="table-scroll-container">
            <table class="table">
                <thead class="table-head">
                    <tr class="table-header-row">
                        <th>
                            <div class="table-cell-content">
                                <div class="table-heading">Card</div>
                                <div class="table-sort-button w-embed">
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="Transparent_Rectangle" data-name="Transparent Rectangle" class="cls-1"></rect>
                                    </svg>
                                </div>
                            </div>
                        </th>
                        <th>
                            <div class="table-cell-content">
                                <div class="table-heading">Expiry</div>
                                <div class="table-sort-button w-embed">
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </div>
                            </div>
                        </th>
                        <th>
                            <div class="table-cell-content grow">
                                <div class="table-heading">Name on Card</div>
                                <div class="table-sort-button w-embed">
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </div>
                            </div>
                        </th>
                        <th>
                            <div class="table-cell-content">
                                <div class="table-heading">Subscriptions</div>
                                <div class="table-sort-button w-embed">
                                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                                        <defs>
                                            <style>.cls-1{fill:none;}</style>
                                        </defs>
                                        <title>chevron--sort</title>
                                        <polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
                                        <polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
                                        <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1"></rect>
                                    </svg>
                                </div>
                            </div>
                        </th>
                        <th class="action-column"> </th>
                    </tr>
                    <tr class="table-filter-row">
                        <th>
                            <div class="table-filter-cell-content">
                                <input class="input-filter w-input" maxlength="256" name="filterCard" data-name="Filter Card" placeholder="Filter" type="text" id="filterCard">
                            </div>
                        </th>
                        <th>
                            <div class="table-filter-cell-content">
                                <div class="date-filter">
                                    <input class="input-filter date-picker w-input" maxlength="256" name="expiryDate" data-name="Expiry Date" placeholder="Filter" type="text" id="expiryDate" data-datepicker="daterange">
                                    <div id="dateFilterButton" class="date-filter-icon-container">
                                        <div class="date-filter-icon w-embed">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32">
                                                <path d="M26,4H22V2H20V4H12V2H10V4H6A2.0025,2.0025,0,0,0,4,6V26a2.0025,2.0025,0,0,0,2,2H26a2.0025,2.0025,0,0,0,2-2V6A2.0025,2.0025,0,0,0,26,4ZM6,6h4V8h2V6h8V8h2V6h4l0,4H6Zm0,6h5v6H6ZM19,26H13V20h6Zm0-8H13V12h6Zm2,8V20h5l.0012,6Z"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                        <th>
                            <div class="table-filter-cell-content">
                                <input class="input-filter w-input" maxlength="256" name="filterName" data-name="Filter Name" placeholder="Filter" type="text" id="filterName">
                            </div>
                        </th>
                        <th>
                            <div class="table-filter-cell-content"></div>
                        </th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody class="table-body">
                    <tr class="table-row">
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-inline-icon w-embed">
                                        <svg class="w-5 mr-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                            <path d="M0 432c0 26.5 21.5 48 48 48H528c26.5 0 48-21.5 48-48v-1.1H514.3l-31.9-35.1-31.9 35.1H246.8V267.1H181L262.7 82.4h78.6l28.1 63.2V82.4h97.2L483.5 130l17-47.6H576V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80V432zm440.4-21.7L482.6 364l42 46.3H576l-68-72.1 68-72.1H525.4l-42 46.7-41.5-46.7H390.5L458 338.6l-67.4 71.6V377.1h-83V354.9h80.9V322.6H307.6V300.2h83V267.1h-122V410.3H440.4zm96.3-72L576 380.2V296.9l-39.3 41.4zm-36.3-92l36.9-100.6V246.3H576V103H515.8l-32.2 89.3L451.7 103H390.5V246.1L327.3 103H276.1L213.7 246.3h43l11.9-28.7h65.9l12 28.7h82.7V146L466 246.3h34.4zM282 185.4l19.5-46.9 19.4 46.9H282z"></path>
                                        </svg>
                                    </div>
                                    <div class="table-data">xxxx xxxx xxxx 1111</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">November 2024</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">John Doe</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">
                                        <a href="#">4</a>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-row-action-button-container">
                                <div data-tippy-content="Edit" class="table-row-action-button">
                                    <div class="table-row-action-button-icon w-embed">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                        </svg>
                                    </div>
                                </div>
                                <div data-tippy-content="Delete" class="table-row-action-button">
                                    <div class="table-row-action-button-icon delete w-embed">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"></polyline>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                            <line x1="10" y1="11" x2="10" y2="17"></line>
                                            <line x1="14" y1="11" x2="14" y2="17"></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="table-row last-row">
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-inline-icon w-embed">
                                        <svg class="w-5 mr-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                            <path d="M0 432c0 26.5 21.5 48 48 48H528c26.5 0 48-21.5 48-48v-1.1H514.3l-31.9-35.1-31.9 35.1H246.8V267.1H181L262.7 82.4h78.6l28.1 63.2V82.4h97.2L483.5 130l17-47.6H576V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80V432zm440.4-21.7L482.6 364l42 46.3H576l-68-72.1 68-72.1H525.4l-42 46.7-41.5-46.7H390.5L458 338.6l-67.4 71.6V377.1h-83V354.9h80.9V322.6H307.6V300.2h83V267.1h-122V410.3H440.4zm96.3-72L576 380.2V296.9l-39.3 41.4zm-36.3-92l36.9-100.6V246.3H576V103H515.8l-32.2 89.3L451.7 103H390.5V246.1L327.3 103H276.1L213.7 246.3h43l11.9-28.7h65.9l12 28.7h82.7V146L466 246.3h34.4zM282 185.4l19.5-46.9 19.4 46.9H282z"></path>
                                        </svg>
                                    </div>
                                    <div class="table-data danger">xxxx xxxx xxxx 1111 <strong>EXPIRED</strong></div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">December 2024</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left overflow">
                                    <div class="table-data">John Doe</div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-cell-content">
                                <div class="table-cell-left">
                                    <div class="table-data">
                                        <a href="#">3</a>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="table-cell">
                            <div class="table-row-action-button-container">
                                <div data-tippy-content="Edit" class="table-row-action-button">
                                    <div class="table-row-action-button-icon w-embed">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
                                            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                        </svg>
                                    </div>
                                </div>
                                <div data-tippy-content="Delete" class="table-row-action-button">
                                    <div class="table-row-action-button-icon delete w-embed">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" >
                                            <polyline points="3 6 5 6 21 6"></polyline>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                            <line x1="10" y1="11" x2="10" y2="17"></line>
                                            <line x1="14" y1="11" x2="14" y2="17"></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table-pagination">
            <div class="pagination-left">
                <div class="items-per-page-container">
                    <div>Items per page:</div>
                    <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
                        <div class="dropdown-closed table-filter w-dropdown-toggle">
                            <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                            <div class="dropdown-text-content">10</div>
                        </div>
                        <nav class="dropdown-open top-left w-dropdown-list">
                            <div class="dropdown-option-container">
                                <a href="#" class="dropdown-option-simple w-inline-block">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">10</div>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">25</div>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">50</div>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">100</div>
                                </a>
                            </div>
                        </nav>
                    </div>
                </div>
                <div class="paginaton-total-items">
                    <div>1–10 of 103 items<br></div>
                </div>
            </div>
            <div class="pagination-right">
                <div class="pagination-pages-dropdown">
                    <div data-hover="false" data-delay="0" class="dropdown w-dropdown">
                        <div class="dropdown-closed table-filter w-dropdown-toggle">
                            <div class="filter-dropdown-arrow w-icon-dropdown-toggle"></div>
                            <div class="dropdown-text-content">#</div>
                        </div>
                        <nav class="dropdown-open top-right w-dropdown-list">
                            <div class="dropdown-option-container">
                                <a href="#" class="dropdown-option-simple w-inline-block">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">1</div>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">2</div>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">3</div>
                                </a>
                                <a href="#" class="dropdown-option-simple w-inline-block">
                                    <div class="dropdown-option-selected-icon-container">
                                        <div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg></div>
                                    </div>
                                    <div class="dropdown-option-text">3</div>
                                </a>
                            </div>
                        </nav>
                    </div>
                    <div>of 11 pages</div>
                </div>
                <div class="pagination-button">
                    <div class="pagination-icon w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve">
                        <polygon points="20,24 10,16 20,8 ">
                        </polygon></svg></div>
                </div>
                <div class="pagination-button">
                    <div class="pagination-icon w-embed"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32" xml:space="preserve">
                        <polygon points="12,8 22,16 12,24 ">
                        </polygon></svg></div>
                </div>
            </div>
        </div>
    </div>
</form>