@model DivanRazor.Pages._PersonGraphPartialModel

@if (Model.Graph == null || Model.Graph.Nodes == null || Model.Graph.Nodes.Count == 0)
{
    <p>اس حصے میں ابھی کسی شخصیت کی نشاندہی نہیں ہوئی.</p>
}
else
{
    <div id="pg-cat-section">
        <p class="up-hint"><small>
            کسی گرہ پر کلک کریں تاکہ صرف اسی شخص کے روابط نمایاں ہوں (واپسی کے لیے دوبارہ کلک کریں)؛ گرہ کو کھینچ کر منتقل کریں (چھوڑنے کے لیے دو بار کلک کریں)۔
            خاکے کو ماؤس سے کھینچیں اور ماؤس کے پہیے سے بڑا/چھوٹا کریں.
            @if (Model.HasSecondaryNodes)
            {
                <text> نقطہ دار گرہیں/ہلکی، وہ رشتہ دار یا متعلقین ہیں جن کا نام اس حصے کے متن میں نہیں آیا لیکن پس منظر کے لیے دکھائے گئے ہیں.</text>
            }
        </small></p>

        <div style="margin-bottom:10px;">
            <input type="text" id="pg-cat-search" placeholder="شخصیت کا نام تلاش کریں..." style="width:240px;" />
            <a role="button" id="pg-cat-reset" class="up-btn up-btn--ghost up-btn--sm">سب دکھائیں</a>
            <a role="button" href="javascript:void(0)" onclick="PeopleExplorer.open()" class="up-btn up-btn--ghost up-btn--sm">تمام شخصیات کا مکمل جال دکھائیں</a>
        </div>

        <div id="pg-cat-legend" class="pg-legend"></div>

        <div id="pg-cat-container" style="position:relative;width:100%;height:55vh;border:1px solid #d8cdb8;border-radius:6px;overflow:hidden;background:#faf7f0;">
            <svg id="pg-cat-svg" width="100%" height="100%"></svg>
        </div>

        <div class="spacer">&nbsp;</div>

        <div style="max-height:30vh;overflow:auto;">
            <table class="up-table">
                <thead>
                    <tr>
                        <th>پہلا شخص</th>
                        <th>رشتے کی نوعیت</th>
                        <th>دوسرا شخص</th>
                        <th>نوٹ</th>
                    </tr>
                </thead>
                <tbody id="pg-cat-table-body"></tbody>
            </table>
        </div>

        <style>
            .pg-circle { fill: #fdf6e6; stroke: #8b6b4a; stroke-width: 1.5; }
            .pg-circle-tree { fill: #f3e2b8; stroke: #7a4a2a; stroke-width: 2; }
            .pg-circle-secondary { stroke-dasharray: 3,2; opacity: 0.7; }
            .pg-label { font-size: 11px; fill: #4a3520; font-family: inherit; }
            .pg-label-secondary { opacity: 0.7; font-style: italic; }
            .pg-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
            .pg-legend-item { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
            .pg-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
        </style>

        @* not an executable script - just a data holder, parsed and rendered explicitly by
           loadPersonGraph() in bk.js once this fragment has been appended to the page, same
           convention used for the JSON blob is deliberately not the ajax response's inline <script>
           since script tags injected via $(data).appendTo(...) don't reliably auto-execute *@
        <script type="application/json" id="pg-cat-data">@Html.Raw(Model.GraphDataJson)</script>
    </div>
}