{% load static %}

<div class="card border-0 px-25 pb-15 h-100">
    <div class="card-header px-0 border-0">
        <h6>Member Progress</h6>
        <div class="card-extra">
            <ul class="card-tab-links nav-tabs nav" role="tablist">
                <li>
                    <a class="active" href="#t_selling-today22" data-bs-toggle="tab" id="t_selling-today22-tab"
                        role="tab" aria-selected="true">Today</a>
                </li>
                <li>
                    <a href="#t_selling-week22" data-bs-toggle="tab" id="t_selling-week22-tab" role="tab"
                        aria-selected="true">Week</a>
                </li>
                <li>
                    <a href="#t_selling-month33" data-bs-toggle="tab" id="t_selling-month33-tab" role="tab"
                        aria-selected="true">Month</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="card-body p-0">
        <div class="tab-content">
            <div class="tab-pane fade active show" id="t_selling-today22" role="tabpanel"
                aria-labelledby="t_selling-today22-tab">
                <div class="selling-table-wrap selling-table-wrap--source selling-table-wrap--member">
                    <div class="table-responsive">
                        <table class="table table--default table-borderless">
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-1.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Robert Clinton</span>
                                        </div>
                                    </td>
                                    <td>$38,536</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>ReactJs</li>
                                                <li>HTML</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" role="progressbar"
                                                        style="width: 80%;" aria-valuenow="80" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">80%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-2.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Member Progress</span>
                                        </div>
                                    </td>
                                    <td>$20,573</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Laravel</li>
                                                <li>Angular</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-info" role="progressbar"
                                                        style="width: 52%;" aria-valuenow="52" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">52%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-5.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Daniel White</span>
                                        </div>
                                    </td>
                                    <td>$17,457</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Python</li>
                                                <li>MySQL</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-success" role="progressbar"
                                                        style="width: 720%;" aria-valuenow="72" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">72%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-3.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Chris Barin </span>
                                        </div>
                                    </td>
                                    <td>$15,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Wordpress</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-secondary" role="progressbar"
                                                        style="width: 92%;" aria-valuenow="92" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">92%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-4.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Daniel Pink</span>
                                        </div>
                                    </td>
                                    <td>$12,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Photoshop</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-warning" role="progressbar"
                                                        style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">25%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-5.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Shane Pollard</span>
                                        </div>
                                    </td>
                                    <td>$12,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Illustrator</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" role="progressbar"
                                                        style="width: 18%;" aria-valuenow="18" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">18%</div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="t_selling-week22" role="tabpanel" aria-labelledby="t_selling-week22-tab">
                <div class="selling-table-wrap selling-table-wrap--source selling-table-wrap--member">
                    <div class="table-responsive">
                        <table class="table table--default table-borderless">
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-1.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Robert Clinton</span>
                                        </div>
                                    </td>
                                    <td>$38,536</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>ReactJs</li>
                                                <li>HTML</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" role="progressbar"
                                                        style="width: 80%;" aria-valuenow="80" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">80%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-2.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Member Progress</span>
                                        </div>
                                    </td>
                                    <td>$20,573</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Laravel</li>
                                                <li>Angular</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-info" role="progressbar"
                                                        style="width: 52%;" aria-valuenow="52" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">52%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-5.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Daniel White</span>
                                        </div>
                                    </td>
                                    <td>$17,457</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Python</li>
                                                <li>MySQL</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-success" role="progressbar"
                                                        style="width: 720%;" aria-valuenow="72" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">72%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-3.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Chris Barin </span>
                                        </div>
                                    </td>
                                    <td>$15,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Wordpress</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-secondary" role="progressbar"
                                                        style="width: 92%;" aria-valuenow="92" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">92%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-4.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Daniel Pink</span>
                                        </div>
                                    </td>
                                    <td>$12,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Photoshop</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-warning" role="progressbar"
                                                        style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">25%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-5.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Shane Pollard</span>
                                        </div>
                                    </td>
                                    <td>$12,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Illustrator</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-warning" role="progressbar"
                                                        style="width: 18%;" aria-valuenow="18" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">18%</div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="t_selling-month33" role="tabpanel" aria-labelledby="t_selling-month33-tab">
                <div class="selling-table-wrap selling-table-wrap--source selling-table-wrap--member">
                    <div class="table-responsive">
                        <table class="table table--default table-borderless">
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-1.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Robert Clinton</span>
                                        </div>
                                    </td>
                                    <td>$38,536</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>ReactJs</li>
                                                <li>HTML</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" role="progressbar"
                                                        style="width: 80%;" aria-valuenow="80" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">80%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-2.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Member Progress</span>
                                        </div>
                                    </td>
                                    <td>$20,573</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Laravel</li>
                                                <li>Angular</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-info" role="progressbar"
                                                        style="width: 52%;" aria-valuenow="52" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">52%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-5.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Daniel White</span>
                                        </div>
                                    </td>
                                    <td>$17,457</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Python</li>
                                                <li>MySQL</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-success" role="progressbar"
                                                        style="width: 72%;" aria-valuenow="72" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">72%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-3.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Chris Barin </span>
                                        </div>
                                    </td>
                                    <td>$15,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Wordpress</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-secondary" role="progressbar"
                                                        style="width: 92%;" aria-valuenow="92" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">92%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-4.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Daniel Pink</span>
                                        </div>
                                    </td>
                                    <td>$12,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Photoshop</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-warning" role="progressbar"
                                                        style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">25%</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="selling-product-img d-flex align-items-center">
                                            <div class="selling-product-img-wrapper order-bg-opacity-primary">
                                                <img class="img-fluid" src="{% static 'img/author/robert-5.png' %}"
                                                    alt="img">
                                            </div>
                                            <span>Shane Pollard</span>
                                        </div>
                                    </td>
                                    <td>$12,354</td>
                                    <td>
                                        <div class="status">
                                            <ul>
                                                <li>Illustrator</li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-center justify-content-end">
                                            <div class="progress-wrap mb-0">
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" role="progressbar"
                                                        style="width: 18%;" aria-valuenow="18" aria-valuemin="0"
                                                        aria-valuemax="100"></div>

                                                </div>
                                            </div>
                                            <div class="ratio-percentage ms-10">18%</div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>