divan/GanjooRazor/Areas/User/Pages/MyBookmarks.cshtml

@page
@model GanjooRazor.Areas.User.Pages.MyBookmarksModel
@using DNTPersianUtils.Core
@{
    Layout = "_UserPanelLayout";
    ViewData["Title"] = "نشان‌شده‌های من";
    await GanjooRazor.Utils.GanjoorSessionChecker.ApplyPermissionsToViewData(Request, Response, ViewData);
}
<div class="up-page-header">
    <h1>@ViewData["Title"]</h1>
</div>
@if (Model.LastError != "")
{
    <div class="up-alert up-alert--danger">@Model.LastError</div>
}
else
{
    <script>
        async function deleteBookmark(bookmarkId) {
            var ok = await upConfirm('آیا از حذف این نشان‌شده اطمینان دارید؟');
            if (!ok) return;

            $.ajax({
                type: "DELETE",
                url: '?handler=Bookmark',
                data: { id: bookmarkId },
                error: function (e) {
                    upToast(e.responseText || 'حذف نشان‌شده با خطا مواجه شد.', 'error');
                },
                success: function () {
                    $('#bookmark-' + bookmarkId).remove();
                    upToast('نشان‌شده حذف شد.', 'success');
                },
            });
        }

        function editPrivateNote(bookmarkId) {
            var noteTextBlockId = '#note-text-' + bookmarkId;
            tinymce.get('editNoteText').setContent($(noteTextBlockId).html());
            $("#editbookmarkId").val(bookmarkId);
            document.getElementById('bookmark-note-dialog').style.display = 'block';
        }

        function editPrivateNoteFinal() {
            $("#editnoteform").unbind('submit').bind('submit', function (e) {
                e.preventDefault();

                var bookmarkId = $("#editbookmarkId").val();

                $.ajax({
                    type: "PUT",
                    url: '?handler=BookmarkNote',
                    data: {
                        id: bookmarkId,
                        note: $("textarea#editNoteText").val()
                    },
                    error: function (e) {
                        upToast(e.responseText || 'ثبت یادداشت با خطا مواجه شد.', 'error');
                    },
                    success: function () {
                        document.getElementById('bookmark-note-dialog').style.display = 'none';
                        var noteTextBlockId = '#note-text-' + bookmarkId;
                        $(noteTextBlockId).html($("textarea#editNoteText").val());
                        upToast('یادداشت ثبت شد.', 'success');
                    },
                });
            });
        }
    </script>

    <partial name="_Pagination" model="Model.PaginationLinks" />

    <div class="up-card">
        <form method="get" id="searchcommentsform" class="up-form-actions">
            <input type="text" name="w" id="w" value="@Model.Query" placeholder="جستجو در یادداشت‌ها" style="flex:1;min-width:200px;" />
            <button type="submit" class="up-btn up-btn--primary">جستجو</button>
        </form>
    </div>

    @if (Model.Bookmarks.Count == 0)
    {
        <partial name="_EmptyState" model="@("شما هنوز هیچ بیتی را نشان نکرده‌اید. برای آشنایی با نحوهٔ نشان کردن اشعار <a href=\"https://blog.ganjoor.net/1400/07/08/ganjoor-bookmarking/\" target=\"_blank\">اینجا</a> را ببینید.")" />
    }
    else
    {
        <div class="up-list">
            @foreach (var bookmark in Model.Bookmarks)
            {
                var bookmarkUrl = $"{bookmark.PoemFullUrl}{(bookmark.CoupletIndex < 0 ? $"#comment-{-bookmark.CoupletIndex}" : $"#bn{bookmark.CoupletIndex + 1}")}";
                <div class="up-list-item" id="bookmark-@bookmark.Id">
                    <div class="up-list-item__meta">
                        از <a href="@bookmarkUrl">@bookmark.PoemFullTitle</a> در @bookmark.DateTime.ToFriendlyPersianDateTextify()
                    </div>
                    <a href="@bookmarkUrl">
                        <img src="@bookmark.PoetImageUrl" style="width:unset;display:unset;border:unset" alt="@bookmark.PoetName" />
                    </a>
                    <div id="bookmark-text-@bookmark.Id">
                        <p>@bookmark.VerseText</p>
                        @if (!string.IsNullOrEmpty(bookmark.Verse2Text))
                        {
                            <p>@bookmark.Verse2Text</p>
                        }
                    </div>
                    @if (!string.IsNullOrEmpty(bookmark.PrivateNote))
                    {
                        <div>
                            <span class="up-badge">یادداشت</span>
                            <div id="note-text-@bookmark.Id" class="ganjoor-comment">
                                @Html.Raw(bookmark.PrivateNote)
                            </div>
                        </div>
                    }
                    else
                    {
                        <div id="note-text-@bookmark.Id"></div>
                    }
                    <div class="up-list-item__actions">
                        <a role="button" onclick="deleteBookmark('@bookmark.Id')" class="up-icon-btn" title="حذف" aria-label="حذف این نشان‌شده"><i class="noindent-info-button delete-icon"></i></a>
                        <a role="button" onclick="editPrivateNote('@bookmark.Id')" class="up-icon-btn" title="یادداشت شخصی" aria-label="ویرایش یادداشت شخصی"><i class="noindent-info-button edit-poem-button"></i></a>
                    </div>
                </div>
            }
        </div>
    }

    <partial name="_Pagination" model="Model.PaginationLinks" />

    <div id="bookmark-note-dialog" class="modal">
        <span onclick="document.getElementById('bookmark-note-dialog').style.display='none'"
          class="close" title="بستن">&times;</span>
        <form class="modal-content animate" method="post" id="editnoteform">
            <table class="max-width-100per width-100per">
                <tr>
                    <td>
                        <textarea name="editNoteText" id="editNoteText" class="inputTextarea editor width-100per" tabindex="4" rows="10"></textarea>
                        <input type="hidden" name="editbookmarkId" id="editbookmarkId" value="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <button name="editnote" id="editnote" class="submitCommentButton width-100per" onclick="return editPrivateNoteFinal();">ویرایش یادداشت</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        یادداشت‌هایی که روی نشان‌شده‌ها می‌نویسید خصوصی هستند و با حذف نشان‌شده پاک می‌شوند.
                    </td>
                </tr>
            </table>
        </form>
    </div>
}