{% extends 'base.html' %}

{% block title %}Exploring File: {{ filename }}{% endblock %}

{% block content %}
<div class="container-fluid explore-content" style="width: 100vw; padding: 0;" mt-4>
    <h1 class="text-center">Exploring RVTools File</h1>
    <p class="text-center lead">This page will display data from the uploaded file: <code>{{ filename }}</code>
    </p>
    <ul class="nav nav-tabs" id="tabMenu" role="tablist">
        {% for sheet_name in sheets.keys() %}
        <li class="nav-item" role="presentation">
            <button class="nav-link {% if loop.first %}active{% endif %}" id="{{ sheet_name }}-tab" data-bs-toggle="tab" data-bs-target="#{{ sheet_name }}" type="button" role="tab" aria-controls="{{ sheet_name }}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">
                {{ sheet_name }}
            </button>
        </li>
        {% endfor %}
    </ul>
    <div class="tab-content mt-3" id="tabContent">
        {% for sheet_name, rows in sheets.items() %}
        <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="{{ sheet_name }}" role="tabpanel" aria-labelledby="{{ sheet_name }}-tab">
            <div class="table-responsive">
                {% if rows %}
                <table class="table table-dark table-striped">
                    <thead>
                        <tr>
                            {% for col in rows[0].keys() %}
                            <th scope="col">{{ col }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in rows %}
                        <tr>
                            {% for cell in row.values() %}
                            <td>{{ cell }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p class="text-center">No data available in this sheet.</p>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}