{{extends "layout.html"}}

{{block "content"}}
<div class="page-header">
    <h1>{{:page_title}}</h1>
</div>

<div class="links-section">
    {{if links}}
    <div class="links-list">
        {{for link in links}}
        <article class="link-card link-archived">
            <div class="link-header">
                <h3 class="link-title">
                    <a href="{{:link.url}}" target="_blank" rel="noopener noreferrer">{{:link.title}}</a>
                </h3>
                <div class="link-badges">
                    <span class="badge badge-archived">Archived</span>
                    {{if link.IsRead}}
                    <span class="badge badge-read">Read</span>
                    {{endif}}
                </div>
            </div>

            <div class="link-url">
                <a href="{{:link.url}}" target="_blank" rel="noopener noreferrer">{{:link.url}}</a>
            </div>

            {{if link.description}}
            <p class="link-description">{{:link.description}}</p>
            {{endif}}

            {{if link.tags}}
            <div class="link-tags">
                {{for tag in link.tags}}
                <a href="/tags/{{:tag.Name}}" class="tag">{{:tag.Name}}</a>
                {{endfor}}
            </div>
            {{endif}}

            <div class="link-meta">
                <span class="link-date">Archived: {{:link.ArchivedAt|datetostr,"yyyy-mm-dd hh:nn"}}</span>
            </div>

            <div class="link-actions">
                <form action="/links/{{:link.id}}/unarchive" method="post" class="inline-form">
                    <button type="submit" class="btn btn-small btn-primary">Restore</button>
                </form>
                <form action="/links/{{:link.id}}/delete" method="post" class="inline-form" onsubmit="return confirm('Are you sure you want to permanently delete this link?');">
                    <button type="submit" class="btn btn-small btn-danger">Delete</button>
                </form>
            </div>
        </article>
        {{endfor}}
    </div>
    {{else}}
    <p class="empty-message">No archived links.</p>
    {{endif}}
</div>
{{endblock}}