@page "/syndicates"
@using Model
@using Chrono.Components
@inject NavigationManager Navigation

<HeadContent>
    <meta name="description" content="Explore all syndicate pairings in Chrono CCG."/>
</HeadContent>

<div class="syndicates-container">
    <div class="syndicates-header">
        <h1>Syndicate Pairings</h1>
        <p class="text-secondary">Explore all @pairings.Count combinations of syndicates</p>
    </div>

    <div class="pairings-grid">
        @foreach (var doc in pairings)
        {
            var s1 = doc.Syndicates?[0] ?? "";
            var s2 = doc.Syndicates?[1] ?? "";
            <div class="pairing-card" @onclick="() => OpenPairing(doc)">
                <div class="pairing-display">
                    <div class="syndicate-item @s1.ToLowerInvariant()">
                        <span class="syn-icon"></span>
                        <span class="syn-name">@s1</span>
                    </div>
                    <div class="pairing-separator">
                        <i class="bi bi-x-lg"></i>
                    </div>
                    <div class="syndicate-item @s2.ToLowerInvariant()">
                        <span class="syn-icon"></span>
                        <span class="syn-name">@s2</span>
                    </div>
                </div>
                <div class="pairing-info">
                    <span class="pairing-label">Dual-Syndicate</span>
                </div>
            </div>
        }
    </div>
</div>

<SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" />

@code {
    private List<DocData> pairings = [];
    private DocData? selectedDoc;

    protected override void OnInitialized()
    {
        pairings = DocDatabase.Docs
            .Where(d => d.Category == "Syndicate Pairings")
            .OrderBy(d => d.Title)
            .ToList();
    }

    private void OpenPairing(DocData doc)
    {
        selectedDoc = doc;
    }

    private void ClosePairing()
    {
        selectedDoc = null;
    }
}