{% extends "base.html" %}

{% block title %}Reports Module{% endblock %}

{% block content %}
<div class="reports-container">
    <h1>Reports Module</h1>
    <p>Access different quality and production reporting modules for data analysis and verification.</p>

    <!-- Row of evenly distributed cards -->
    <div class="dashboard-container">
        <!-- Card 1: Quality Reports -->
        <div class="dashboard-card">
            <h3>Quality Reports</h3>
            <p>Access quality scanning reports and analysis for production process verification.</p>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <a href="{{ url_for('main.quality') }}" class="btn">Launch Quality Reports</a>
            </div>
        </div>

        <!-- Card 2: FG Quality Reports -->
        <div class="dashboard-card">
            <h3>FG Quality Reports</h3>
            <p>Finished Goods quality reports and analysis for final product verification.</p>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <a href="{{ url_for('main.fg_quality') }}" class="btn">Launch FG Quality Reports</a>
            </div>
        </div>

        <!-- Card 3: Additional Reports (Placeholder for future expansion) -->
        <div class="dashboard-card">
            <h3>Additional Reports</h3>
            <p>Access additional reporting modules and data analysis tools.</p>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <button class="btn" disabled style="opacity: 0.5;">Coming Soon</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}