@page
@model GanjooRazor.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>
}