@model List<QRRapidoApp.Models.ArticleMetadata>
@{
    ViewData["Title"] = "Docs & Tutoriais para Desenvolvedores";
    Layout = "~/Views/Shared/_Layout.cshtml";

    var isEn = (ViewBag.Culture as string) == "en";
    var isEs = (ViewBag.Culture as string) == "es-PY" || (ViewBag.Culture as string) == "es";
    var devBase = isEn ? "/en/Developer" : isEs ? "/es-PY/Developer" : "/Developer";

    string T(string pt, string es, string en) => isEn ? en : isEs ? es : pt;
}

<div class="container mt-4 mb-5">

    <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
        <div class="d-flex align-items-center">
            <div class="me-3"><i class="fas fa-book-open fa-2x text-primary"></i></div>
            <div>
                <h1 class="h3 mb-0">@T("Docs & Tutoriais", "Docs & Tutoriales", "Docs & Tutorials")</h1>
                <p class="text-muted mb-0 small">@T("Guias técnicos para integrar e usar a API QRRapido.", "Guías técnicas para integrar ha usar la API QRRapido.", "Technical guides to integrate and use the QRRapido API.")</p>
            </div>
        </div>
        <div class="d-flex gap-2">
            <a href="@devBase" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-key me-1"></i> @T("Minhas Chaves", "Mis Claves", "My Keys")
            </a>
            <a href="/api/docs" target="_blank" class="btn btn-outline-success btn-sm">
                <i class="fas fa-code me-1"></i> Swagger
            </a>
        </div>
    </div>

    @if (Model.Any())
    {
        <div class="row g-4">
            @foreach (var article in Model)
            {
                <div class="col-md-6 col-lg-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">@article.Title</h5>
                            <p class="card-text text-muted flex-grow-1 small">@article.Description</p>
                            <div class="mb-3">
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i> @article.ReadingTimeMinutes @T("min de leitura", "min de lectura", "min read")
                                </small>
                            </div>
                            <a href="@devBase/docs/@article.Slug" class="btn btn-primary btn-sm">
                                @T("Ler", "Leer", "Read") <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
    else
    {
        <div class="text-center py-5">
            <i class="fas fa-book fa-3x text-muted opacity-25 mb-3"></i>
            <p class="text-muted">@T("Nenhum artigo encontrado.", "Ningún artículo encontrado.", "No articles found.")</p>
        </div>
    }
</div>