{% extends "django_pev/base.html" %}
{% block content %}
    <div class="row">
        <div class="card mb-4 mt-4">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="card-title mb-0">Space Stats</h4>
                        <ul>
                            <li>
                                Total database size: {{ database_size | filesizeformat}}
                            </li>
                            <li>
                                Total table size: {{ table_size | filesizeformat}}
                            </li>
                            <li>
                                Total indexes size: {{ indexes_size | filesizeformat}}
                            </li>
                        </ul>
                    </div>
                </div>

                <nav>
                    <div class="nav nav-tabs mt-4" id="nav-tab" role="tablist">
                        <button class="nav-link active" id="nav-tables-tab" data-coreui-toggle="tab" data-coreui-target="#nav-tables" type="button" role="tab" aria-controls="nav-tables" aria-selected="true">Tables</button>
                        <button class="nav-link" id="nav-indexes-tab" data-coreui-toggle="tab" data-coreui-target="#nav-indexes" type="button" role="tab" aria-controls="nav-indexes" aria-selected="false">Indexes</button>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-tables" role="tabpanel" aria-labelledby="nav-tables-tab" tabindex="0">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Schema</th>
                                    <th scope="col">Size</th>
                                    <th scope="col">Row Estimate</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in tables %}
                                    <tr>
                                        <td>{{ row.name }}</td>
                                        <td>{{ row.schema }}</td>
                                        <td>{{ row.size_bytes | filesizeformat }}</td>
                                        <td>{{ row.row_estimate }}</td>
                                    </tr>
                                {% endfor%}
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="nav-indexes" role="tabpanel" aria-labelledby="nav-indexes-tab" tabindex="0">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Schema</th>
                                    <th scope="col">Size</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in indexes%}
                                    <tr>
                                        <td>
                                            {{ row.name }}
                                            {% if row.is_unused %}
                                                <span class="badge text-bg-warning">Unused Index</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ row.schema }}</td>
                                        <td>{{ row.size_bytes | filesizeformat }}</td>
                                    </tr>
                                {% endfor%}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card-footer">
            </div>
        </div>
    </div>
{% endblock %}