@model QRRapidoApp.Models.ViewModels.ArticleViewModel
@{
    ViewData["Title"] = Model.Metadata.Title + " — QRRapido Docs";
    Layout = "~/Views/Shared/_Layout.cshtml";

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

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

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

    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="@devBase">@T("Portal do Desenvolvedor", "Portal del Desarrollador", "Developer Portal")</a></li>
            <li class="breadcrumb-item"><a href="@devBase/docs">Docs</a></li>
            <li class="breadcrumb-item active" aria-current="page">@Model.Metadata.Title</li>
        </ol>
    </nav>

    <div class="row">

        <article class="col-lg-8">
            <header class="mb-4">
                <h1 class="mb-3">@Model.Metadata.Title</h1>
                <p class="text-muted small">
                    <i class="fas fa-clock me-1"></i> @Model.Metadata.ReadingTimeMinutes @T("min de leitura", "min de lectura", "min read")
                    &nbsp;·&nbsp;
                    <i class="fas fa-calendar me-1"></i> @Model.Metadata.Date.ToString("dd/MM/yyyy")
                </p>
                <p class="lead text-muted">@Model.Metadata.Description</p>
                <hr>
            </header>

            <div class="article-content">
                @Html.Raw(Model.HtmlContent)
            </div>

            <footer class="mt-5 pt-3 border-top">
                <small class="text-muted">@T("Última atualização:", "Última actualización:", "Last updated:") @Model.Metadata.LastMod.ToString("dd/MM/yyyy")</small>
            </footer>
        </article>

        <aside class="col-lg-4">

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white py-2">
                    <h6 class="mb-0"><i class="fas fa-rocket me-2"></i>@T("Links Rápidos", "Links Pya'e", "Quick Links")</h6>
                </div>
                <div class="list-group list-group-flush">
                    <a href="@devBase" class="list-group-item list-group-item-action small">
                        <i class="fas fa-key me-2 text-primary"></i>@T("Minhas Chaves de API", "Mis Claves de API", "My API Keys")
                    </a>
                    <a href="/api/docs" target="_blank" class="list-group-item list-group-item-action small">
                        <i class="fas fa-code me-2 text-success"></i>Swagger / OpenAPI
                    </a>
                    <a href="@devBase/Pricing" class="list-group-item list-group-item-action small">
                        <i class="fas fa-arrow-up me-2 text-warning"></i>@T("Planos de API", "Planes de API", "API Plans")
                    </a>
                    <a href="@devBase/docs" class="list-group-item list-group-item-action small">
                        <i class="fas fa-book me-2 text-info"></i>@T("Todos os Tutoriais", "Todos los Tutoriales", "All Tutorials")
                    </a>
                </div>
            </div>

            @if (Model.RelatedArticles.Any())
            {
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white py-2">
                        <h6 class="mb-0"><i class="fas fa-bookmark me-2 text-secondary"></i>@T("Outros Tutoriais", "Otros Tutoriales", "Other Tutorials")</h6>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach (var related in Model.RelatedArticles)
                        {
                            <a href="@devBase/docs/@related.Slug" class="list-group-item list-group-item-action">
                                <div class="fw-semibold small">@related.Title</div>
                                <div class="text-muted" style="font-size:0.8rem;">@related.Description</div>
                            </a>
                        }
                    </div>
                </div>
            }
        </aside>

    </div>
</div>

<style>
    .article-content { font-size: 1.05rem; line-height: 1.8; }
    .article-content h2 { margin-top: 2rem; margin-bottom: 0.75rem; font-weight: 600; border-bottom: 1px solid #dee2e6; padding-bottom: 0.3rem; }
    .article-content h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600; }
    .article-content pre { background: #1e1e1e; color: #d4d4d4; padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; font-size: 0.875rem; }
    .article-content code { background: #f4f4f4; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.875em; color: #d63384; }
    .article-content pre code { background: transparent; color: inherit; padding: 0; }
    .article-content blockquote { border-left: 4px solid #0d6efd; padding: 0.5rem 1rem; margin-left: 0; background: #f8f9ff; border-radius: 0 4px 4px 0; color: #495057; }
    .article-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
    .article-content th, .article-content td { border: 1px solid #dee2e6; padding: 0.5rem 0.75rem; }
    .article-content th { background: #f8f9fa; font-weight: 600; }
</style>