{{ define "title"}}{{ t "page.shared_entries.title" }} ({{ .total }}){{ end }}

{{ define "page_header"}}
<section class="page-header" aria-labelledby="page-header-title page-header-title-count">
    <h1 id="page-header-title">
        {{ t "page.shared_entries.title" }}
        <span aria-hidden="true">({{ .total }})</span>
    </h1>
    <span id="page-header-title-count" class="sr-only">{{ plural "page.shared_entries_count" .total .total }}</span>
    {{ if .entries }}
    <nav aria-label="{{ t "page.shared_entries.title" }} {{ t "menu.title" }}">
        <ul>
            <li>
                <button
                    class="page-button"
                    data-confirm="true"
                    data-url="{{ route "flushHistory" }}"
                    data-label-question="{{ t "confirm.question" }}"
                    data-label-yes="{{ t "confirm.yes" }}"
                    data-label-no="{{ t "confirm.no" }}"
                    data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}{{ t "menu.flush_history" }}</button>
            </li>
            <li>
                <a class="page-link" href="{{ route "sharedEntries" }}">{{ icon "share" }}{{ t "menu.shared_entries" }}</a>
            </li>
        </ul>
    </nav>
    {{ end }}
</section>
{{ end }}

{{ define "content"}}
{{ if not .entries }}
    <p role="alert" class="alert alert-info">{{ t "alert.no_shared_entry" }}</p>
{{ else }}
    <div class="pagination-top">
        {{ template "pagination" .pagination }}
    </div>
    <div class="items">
        {{ range .entries }}
        <article
            class="item entry-item {{ if $.user.EntrySwipe }}entry-swipe{{ end }} item-status-{{ .Status }}"
            data-id="{{ .ID }}"
            aria-labelledby="entry-title-{{ .ID }}"
            tabindex="-1"
        >
            <header class="item-header" dir="auto">
                <h2 id="entry-title-{{ .ID }}" class="item-title">
                    <a href="{{ route "readEntry" "entryID" .ID }}">
                        {{ if ne .Feed.Icon.IconID 0 }}
                        <img src="{{ route "feedIcon" "externalIconID" .Feed.Icon.ExternalIconID }}" width="16" height="16" loading="lazy" alt="">
                        {{ end }}
                        {{ .Title }}
                    </a>
                    {{ if .ShareCode }}
                    <a href="{{ route "sharedEntry" "shareCode" .ShareCode }}"
                        title="{{ t "entry.shared_entry.title" }}"
                        {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}>{{ icon "share" }}</a>
                    {{ end }}
                </h2>
                <span class="category"><a href="{{ route "categoryEntries" "categoryID" .Feed.Category.ID }}">{{ .Feed.Category.Title }}</a></span>
            </header>
            <div class="item-meta">
                <ul class="item-meta-info">
                    <li class="item-meta-info-site-url">
                        <a href="{{ route "feedEntries" "feedID" .Feed.ID }}" title="{{ .Feed.SiteURL }}">{{ truncate .Feed.Title 35 }}</a>
                    </li>
                    <li class="item-meta-info-timestamp">
                        <time datetime="{{ isodate .Date }}" title="{{ isodate .Date }}">{{ elapsed $.user.Timezone .Date }}</time>
                    </li>
                </ul>
                <ul class="item-meta-icons">
                    <li class="item-meta-icons-delete">
                        {{ icon "delete" }}
                        <a href="#"
                            data-confirm="true"
                            data-url="{{ route "unshareEntry" "entryID" .ID }}"
                            data-label-question="{{ t "confirm.question" }}"
                            data-label-yes="{{ t "confirm.yes" }}"
                            data-label-no="{{ t "confirm.no" }}"
                            data-label-loading="{{ t "confirm.loading" }}">{{ t "entry.unshare.label" }}</a>
                    </li>
                </ul>
            </div>
        </article>
        {{ end }}
    </div>
    <div class="pagination-bottom">
        {{ template "pagination" .pagination }}
    </div>
{{ end }}

{{ end }}
