{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans "Test Browser" %}{% endblock %}

{% block contents %}
<div class="container-fluid" style="padding-top: 30px;">
    <div class="row" style="margin-bottom: 30px;">
        <div class="col-xs-12 text-center">
            <h2>{% trans "Test Browser" %}</h2>
            <p class="text-muted">{% trans "Browse and explore your test cases, plans, runs, and execution results." %}</p>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-3">
            <a href="{% url 'testcase-browser' %}" class="landing-card">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <span class="pficon pficon-catalog" style="font-size: 48px; color: #0088ce; display: block; margin-bottom: 15px;"></span>
                        <h3 style="margin-top: 0;">{% trans "Test Cases" %}</h3>
                        <p class="text-muted">{% trans "Browse test cases by product and category with tree navigation." %}</p>
                        <span class="badge" style="font-size: 18px; background-color: #0088ce;">{{ total_cases }}</span>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-sm-6 col-md-3">
            <a href="{% url 'testplan-browser' %}" class="landing-card">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <span class="pficon pficon-topology" style="font-size: 48px; color: #3f9c35; display: block; margin-bottom: 15px;"></span>
                        <h3 style="margin-top: 0;">{% trans "Test Plans" %}</h3>
                        <p class="text-muted">{% trans "Browse test plans by product with type and status overview." %}</p>
                        <span class="badge" style="font-size: 18px; background-color: #3f9c35;">{{ total_plans }}</span>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-sm-6 col-md-3">
            <a href="{% url 'testrun-browser' %}" class="landing-card">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <span class="pficon pficon-running" style="font-size: 48px; color: #ec7a08; display: block; margin-bottom: 15px;"></span>
                        <h3 style="margin-top: 0;">{% trans "Test Runs" %}</h3>
                        <p class="text-muted">{% trans "Browse test runs by product and plan with execution status." %}</p>
                        <span class="badge" style="font-size: 18px; background-color: #ec7a08;">{{ total_runs }}</span>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-sm-6 col-md-3">
            <a href="{% url 'consolidated-browser' %}" class="landing-card">
                <div class="panel panel-default text-center">
                    <div class="panel-body">
                        <span class="pficon pficon-trend-up" style="font-size: 48px; color: #703fec; display: block; margin-bottom: 15px;"></span>
                        <h3 style="margin-top: 0;">{% trans "Consolidated" %}</h3>
                        <p class="text-muted">{% trans "Dashboard view with drill-down into plans and cases." %}</p>
                        <span class="badge" style="font-size: 18px; background-color: #703fec;">{{ total_executions }}</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

<style>
    .landing-card { text-decoration: none; color: inherit; display: block; }
    .landing-card .panel { transition: box-shadow 0.2s ease, transform 0.2s ease; min-height: 260px; }
    .landing-card:hover .panel { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); }
    .landing-card:hover { text-decoration: none; color: inherit; }
    .landing-card .panel-body { padding: 30px 20px; }
    .landing-card h3 { font-size: 18px; font-weight: 600; }
    .landing-card p { font-size: 13px; min-height: 40px; }
</style>
{% endblock %}