divan/TajikGanjoor/Pages/Index.cshtml

@page
@model IndexModel


@if (!string.IsNullOrEmpty(Model.LastError))
{
    @Html.Raw(Model.LastError)
    return;
}

@if (Model.Poets == null)
{
    <p>
        Хато дар дарёфти феҳристи суханварон
    </p>
    return;
}

<div class="text-center">
    @if (Model.IsSearchPage)
    {
        @if (Model.Poems == null)
        {
            <div class="poem">
                <h2>Ёфт менашавад ҷустаем мо</h2>
                <p>
                    Шеъре шомили ин иборат ёфт нашуд.
                </p>
            </div>
        }
        else
            for (int poemIndex = 0; poemIndex < Model.Poems.Count; poemIndex++)
            {
                var poem = Model.Poems[poemIndex];

                <div class="sitem">
                    <a class="sitem-poet-portrait" href="@poem.Category.Poet.FullUrl" title="@poem.Category.Poet.Nickname">
                        <img src="/images/poets/@(poem.Category.Poet.Id).png" alt="@poem.Category.Poet.Nickname" loading="lazy"
                             onerror="this.onerror=null;this.src='/images/poets/999.png';" />
                    </a>
                    <div class="sitem-body">
                        <h2>
                            <a href="@poem.FullUrl">@poem.FullTitle</a>
                        </h2>
                        <div class="sit">
                            @Html.Raw(poem.PlainText)
                        </div>
                    </div>
                </div>
            }

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

        @Html.Raw(Model.PagingToolsHtml)

    }
    else
    @if (Model.IsHomePage)
    {
        var popularGroup = Model.PoetGroups.SingleOrDefault(g => g.Id == 0);
        var centuryGroups = Model.PoetGroups.Where(g => g.Id != 0).ToList();

        <div class="tg-poet-search">
            <input type="text" id="tg-findpoet" placeholder="Ҷустуҷӯи шоир" oninput="tgInlineSearch(this.value)" />
            <div class="tg-poet-grid" id="tg-found-poets"></div>
        </div>

        <div class="tg-view-switch">
            <button type="button" class="tg-view-switch-btn active" data-view="century" onclick="tgSwitchView('century')">Аз рӯи аср</button>
            <button type="button" class="tg-view-switch-btn" data-view="alpha" onclick="tgSwitchView('alpha')">Аз рӯи алифбо</button>
        </div>

        <div id="tg-view-century">
            @if (popularGroup != null)
            {
                <div class="tg-century-heading">Шоирони маъмул</div>
                <div class="tg-poet-grid">
                    @foreach (var poet in popularGroup.Poets)
                    {
                        <a class="tg-poet-card" href="@poet.FullUrl" title="@poet.Name" data-poet-id="@poet.Id" data-value="@poet.Nickname">
                            <span class="tg-poet-portrait">
                                <img src="/images/poets/@(poet.Id).png" alt="@poet.Nickname" loading="lazy"
                                     onerror="this.onerror=null;this.src='/images/poets/999.png';" />
                            </span>
                            <span class="tg-poet-name">@poet.Nickname</span>
                        </a>
                    }
                </div>
            }

            @if (centuryGroups.Count > 0)
            {
                <div class="tg-century-heading">Гурӯҳбандӣ бар асоси аср</div>
                <div class="tg-century-nav">
                    @foreach (var g in centuryGroups)
                    {
                        <a href="#tg-pg-@g.Id" class="circled-number">@(g.HalfCenturyOrder + 2)</a>
                    }
                </div>

                @foreach (var century in centuryGroups)
                {
                    @if (century.ShowInTimeLine)
                    {
                        <div class="tg-century-heading" id="tg-pg-@century.Id">@century.Name</div>
                    }
                    <div class="tg-poet-grid">
                        @foreach (var poet in century.Poets)
                        {
                            <a class="tg-poet-card" href="@poet.FullUrl" title="@poet.Name" data-poet-id="@poet.Id" data-value="@poet.Nickname">
                                <span class="tg-poet-portrait">
                                    <img src="/images/poets/@(poet.Id).png" alt="@poet.Nickname" loading="lazy"
                                         onerror="this.onerror=null;this.src='/images/poets/999.png';" />
                                </span>
                                <span class="tg-poet-name">@poet.Nickname</span>
                            </a>
                        }
                    </div>
                }
            }
        </div>

        <div id="tg-view-alpha" style="display:none">
            <div class="tg-century-heading">Аз рӯи алифбо</div>
            <div class="tg-poet-grid">
                @foreach (var poet in Model.AlphabeticalPoets)
                {
                    <a class="tg-poet-card" href="@poet.FullUrl" title="@poet.Name" data-poet-id="@poet.Id" data-value="@poet.Nickname">
                        <span class="tg-poet-portrait">
                            <img src="/images/poets/@(poet.Id).png" alt="@poet.Nickname" loading="lazy"
                                 onerror="this.onerror=null;this.src='/images/poets/999.png';" />
                        </span>
                        <span class="tg-poet-name">@poet.Nickname</span>
                    </a>
                }
            </div>
        </div>
    }
    else
    {
        @if (Model.IsPoetPage)
        {
            <div class="tg-poet-header">
                <span class="tg-poet-portrait-lg">
                    <img src="/images/poets/@(Model.GanjoorPage.PoetOrCat.Poet.Id).png" alt="@Model.GanjoorPage.PoetOrCat.Poet.Nickname" loading="lazy"
                         onerror="this.onerror=null;this.src='/images/poets/999.png';" />
                </span>
            </div>
            <div class="tg-poet-page">
                @Html.Raw(Model.GanjoorPage.HtmlText)
            </div>
        }
        else if (Model.IsCatPage)
        {
            <div class="tg-cat-page">
                @Html.Raw(Model.GanjoorPage.HtmlText)
            </div>
        }
        else if (Model.IsPoemPage)
        {
            @Html.Raw(Model.GanjoorPage.HtmlText)

            @if (Model.GanjoorPage.Poem.Recitations != null && Model.GanjoorPage.Poem.Recitations.Length > 0)
            {
                <div class="tg-recitations">
                    <div class="tg-recitations-title">Хониш</div>
                    @foreach (var recitation in Model.GanjoorPage.Poem.Recitations)
                    {
                        <div class="tg-recitation">
                            <audio id="tg-audio-@recitation.Id" controls preload="none">
                                <source src="@recitation.Mp3Url" />
                            </audio>
                            <div class="tg-recitation-caption">
                                <span class="tg-recitation-title">@recitation.AudioTitle</span>
                                @if (!string.IsNullOrEmpty(recitation.AudioArtist))
                                {
                                    <span class="tg-recitation-artist">— @recitation.AudioArtist</span>
                                }
                                <a class="tg-recitation-download" href="@recitation.Mp3Url" download title="Боргирӣ">⬇</a>
                            </div>
                            @if (recitation.InSyncWithText)
                            {
                                <script>
                                    tgInitRecitationSync(
                                        document.getElementById('tg-audio-@recitation.Id'),
                                        '@Html.Raw($"{TajikGanjoor.APIRoot.InternetUrl}/api/audio/file/{recitation.Id}.xml")'
                                    );
                                </script>
                            }
                        </div>
                    }
                </div>
            }
        }
        else
        {
            @Html.Raw(Model.GanjoorPage.HtmlText)
        }
    }

</div>