@page
@model DiwanRazor.Pages.PeopleExplorerModel
@{
    Layout = null;
}
@if (!string.IsNullOrEmpty(Model.LastError))
{
    <p>@Model.LastError</p>
}
else
{
    <div class="up-modal-explorer">
        <h2>شخصیات کی تلاش</h2>

        @if (Model.FamilyTreeRoots != null && Model.FamilyTreeRoots.Count > 0)
        {
            <h3>شجرے</h3>
            <ul>
                @foreach (var root in Model.FamilyTreeRoots)
                {
                    <li>
                        <a href="javascript:void(0)" onclick="PersonWindow.open(@root.Id)">@root.FamilyTreeCaption</a>
                        <small>(@root.Name)</small>
                        — <a href="javascript:void(0)" onclick="FamilyTreeWindow.open(@root.Id)"><small>خاکہ دکھائیں</small></a>
                    </li>
                }
            </ul>
        }

        <h3>تمام شخصیات کے روابط کا جال</h3>
        <p class="up-hint"><small>
            کسی گرہ پر کلک کریں تاکہ صرف اسی شخص کے روابط نمایاں ہوں (واپسی کے لیے دوبارہ کلک کریں)؛ کسی شخصیت کے نام پر کلک کریں تو اس کی مکمل معلومات کھل جائیں گی۔
            خاکے کو ماؤس سے کھینچیں اور ماؤس کے پہیے سے بڑا/چھوٹا کریں.
        </small></p>

        <div style="margin-bottom:10px;">
            <input type="text" id="pge-search" placeholder="شخصیت کا نام تلاش کریں..." style="width:240px;" />
            <a role="button" id="pge-reset" class="up-btn up-btn--ghost up-btn--sm">سب دکھائیں</a>
        </div>

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

        <div id="pge-container" style="position:relative;width:100%;height:55vh;border:1px solid #d8cdb8;border-radius:6px;overflow:hidden;background:#faf7f0;">
            <svg id="pge-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="pge-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-label { font-size: 11px; fill: #4a3520; font-family: inherit; }
            .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; }
            .pg-person-link { cursor: pointer; }
        </style>

        @* not an executable script - just a data holder, parsed and rendered explicitly by
           PeopleExplorer.open()'s onReady callback in personwindow.js once this fragment has been
           injected into the modal body *@
        <script type="application/json" id="pge-data">@Html.Raw(Model.GraphDataJson)</script>
    </div>
}