@model QRRapidoApp.Models.Ads.AffiliateAdViewModel
@inject Microsoft.Extensions.Localization.IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer
@{
    var content = Model.Content;
    var containerClass = string.IsNullOrWhiteSpace(Model.ContainerCssClass)
        ? "ad-container affiliate-ad"
        : $"{Model.ContainerCssClass} affiliate-ad";
    var ctaText = string.IsNullOrWhiteSpace(content.CtaText) ? "Ver oferta" : content.CtaText;
    var slotKey = Model.SlotKey?.ToLowerInvariant();
    var isWideSlot = string.Equals(slotKey, "header") || string.Equals(slotKey, "footer");
    var imageStyle = slotKey switch
    {
        "header" => "max-height:140px;object-fit:contain;width:100%;",
        "footer" => "max-height:140px;object-fit:contain;width:100%;",
        "sidebar" => "max-height:200px;object-fit:contain;width:100%;",
        "content" => "max-height:220px;object-fit:contain;width:100%;",
        _ => "max-height:220px;object-fit:contain;width:100%;"
    };
    var hasImage = !string.IsNullOrWhiteSpace(content.ImageUrl);

    if (isWideSlot)
    {
        containerClass = $"{containerClass} affiliate-ad-wide";
    }
}

<div class="@containerClass" data-slot="@Model.SlotKey">
    <div class="ad-label">@Localizer["Advertisement"]</div>
    @if (isWideSlot)
    {
        <div class="card border-0 shadow-sm h-100 affiliate-ad-card">
            <div class="card-body">
                <div class="affiliate-ad-card-content">
                    @if (hasImage)
                    {
                        <div class="affiliate-ad-media">
                            <img src="@content.ImageUrl" alt="@content.Title" class="affiliate-ad-image img-fluid"
                                 style="@imageStyle" loading="lazy" />
                            @if (!string.IsNullOrWhiteSpace(content.BadgeText))
                            {
                                <span class="affiliate-ad-partner badge bg-warning text-dark small mt-2">@content.BadgeText</span>
                            }
                        </div>
                    }
                    <div class="affiliate-ad-details">
                        @if (!hasImage && !string.IsNullOrWhiteSpace(content.BadgeText))
                        {
                            <span class="affiliate-ad-partner badge bg-warning text-dark">@content.BadgeText</span>
                        }
                        <h6 class="card-title mb-0">@content.Title</h6>
                        @if (!string.IsNullOrWhiteSpace(content.Description))
                        {
                            <p class="card-text text-muted small mb-0">@content.Description</p>
                        }
                        @if (!string.IsNullOrWhiteSpace(content.PriceText))
                        {
                            <div class="affiliate-ad-price fw-semibold text-success">@content.PriceText</div>
                        }
                        <div class="affiliate-ad-actions">
                            <a href="@content.ProductUrl" target="_blank" rel="noopener sponsored" class="btn btn-sm btn-warning affiliate-ad-cta">
                                @ctaText
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
    else
    {
        <div class="card border-0 shadow-sm h-100 affiliate-ad-card">
            @if (hasImage)
            {
                <img src="@content.ImageUrl" alt="@content.Title" class="card-img-top rounded-top affiliate-ad-image"
                     style="@imageStyle" loading="lazy" />
            }
            <div class="card-body text-center">
                @if (!string.IsNullOrWhiteSpace(content.BadgeText))
                {
                    <span class="badge bg-warning text-dark small mb-2">@content.BadgeText</span>
                }
                <h6 class="card-title mb-2">@content.Title</h6>
                @if (!string.IsNullOrWhiteSpace(content.Description))
                {
                    <p class="card-text text-muted small mb-2">@content.Description</p>
                }
                @if (!string.IsNullOrWhiteSpace(content.PriceText))
                {
                    <div class="fw-semibold text-success mb-3">@content.PriceText</div>
                }
                <a href="@content.ProductUrl" target="_blank" rel="noopener sponsored" class="btn btn-sm btn-warning w-100">
                    @ctaText
                </a>
            </div>
        </div>
    }
</div>