{{ define "feed_list" }}
    <div class="items">
        {{ range .feeds }}
        <article
            class="item feed-item {{ if ne .ParsingErrorCount 0 }}feed-parsing-error{{ else if ne .UnreadCount 0 }}feed-has-unread{{ end }}"
            aria-labelledby="feed-title-{{ .ID }}"
        >
            <header class="item-header" dir="auto">
                <h2 id="feed-title-{{ .ID }}" class="item-title">

                    <a href="{{ route "feedEntries" "feedID" .ID }}">
                        {{ if and (.Icon) (gt .Icon.IconID 0) }}
                            <img src="{{ route "icon" "iconID" .Icon.IconID }}" width="16" height="16" loading="lazy" alt="">
                        {{ end }}
                        {{ if .Disabled }} 🚫 {{ end }}
                        {{ .Title }}
                    </a>
                </h2>
                <span class="feed-entries-counter">
                    <span aria-hidden="true">(</span>
                    <span class="sr-only">
                        {{ t "page.feeds.unread_counter" }}:
                    </span>
                    <span>{{ .UnreadCount }}</span>
                    <span aria-hidden="true">/</span>
                    <span class="sr-only">
                        {{ t "page.categories.all_counter" }}:
                    </span>
                    <span>{{ .NumberOfVisibleEntries }}</span>
                    <span aria-hidden="true">)</span>
                </span>
                <span class="category">
                    <a id="feed-category-{{ .ID }}"
                       href="{{ route "categoryEntries" "categoryID" .Category.ID }}"
                       aria-label="{{ t "page.feeds.category" }}: {{ .Category.Title }}"
                    >
                        {{ .Category.Title }}
                    </a>
                </span>
            </header>
            <div class="item-meta">
                <ul class="item-meta-info">
                    <li class="item-meta-info-site-url" dir="auto">
                        <a href="{{ .SiteURL | safeURL  }}" title="{{ .SiteURL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer" data-original-link="{{ $.user.MarkReadOnView }}">{{ domain .SiteURL }}</a>
                    </li>
                    <li class="item-meta-info-checked-at">
                        {{ t "page.feeds.last_check" }} <time datetime="{{ isodate .CheckedAt }}" title="{{ isodate .CheckedAt }}">{{ elapsed $.user.Timezone .CheckedAt }}</time>
                    </li>
                    {{ $nextCheckDuration := duration .NextCheckAt }}
                    {{ if ne $nextCheckDuration "" }}
                    <li class="item-meta-info-next-check-at">
                        {{ t "page.feeds.next_check" }} <time datetime="{{ isodate .NextCheckAt }}" title="{{ isodate .NextCheckAt }}">{{ $nextCheckDuration }}</time>
                    </li>
                    {{ end }}
                </ul>
                <ul class="item-meta-icons">
                    <li class="item-meta-icons-refresh">
                        <a href="{{ route "refreshFeed" "feedID" .ID }}"
                            role="button"
                            aria-describedby="feed-title-{{ .ID }}">{{ icon "refresh" }}<span class="icon-label">{{ t "menu.refresh_feed" }}</span></a>
                    </li>
                    <li class="item-meta-icons-edit">
                        <a href="{{ route "editFeed" "feedID" .ID }}"
                            role="button"
                            aria-describedby="feed-title-{{ .ID }}">{{ icon "edit" }}<span class="icon-label">{{ t "menu.edit_feed" }}</span></a>
                    </li>
                    <li class="item-meta-icons-remove">
                        <a href="#"
                            role="button"
                            aria-describedby="feed-title-{{ .ID }}"
                            data-confirm="true"
                            data-label-question="{{ t "confirm.question" }}"
                            data-label-yes="{{ t "confirm.yes" }}"
                            data-label-no="{{ t "confirm.no" }}"
                            data-label-loading="{{ t "confirm.loading" }}"
                            data-url="{{ route "removeFeed" "feedID" .ID }}">{{ icon "delete" }}<span class="icon-label">{{ t "action.remove" }}</span></a>
                    </li>
                    {{ if .UnreadCount }}
                      <li class="item-meta-icons-mark-as-read">
                        <a href="#"
                            role="button"
                            aria-describedby="feed-title-{{ .ID }}"
                            data-confirm="true"
                            data-label-question="{{ t "confirm.question" }}"
                            data-label-yes="{{ t "confirm.yes" }}"
                            data-label-no="{{ t "confirm.no" }}"
                            data-label-loading="{{ t "confirm.loading" }}"
                            data-url="{{ route "markFeedAsRead" "feedID" .ID }}">{{ icon "read" }}<span class="icon-label">{{ t "menu.mark_all_as_read" }}</span></a>
                      </li>
                    {{ end }}
                </ul>
            </div>
            {{ if ne .ParsingErrorCount 0 }}
                <div class="parsing-error">
                    <strong title="{{ .ParsingErrorMsg }}" class="parsing-error-count">{{ plural "page.feeds.error_count" .ParsingErrorCount .ParsingErrorCount }}</strong>
                    - <small class="parsing-error-message">{{ .ParsingErrorMsg }}</small>
                </div>
            {{ end }}
        </article>
        {{ end }}
    </div>
{{ end }}