{{extends "layout.html"}}

{{block "content"}}
<div class="page-header">
    <h1>{{:page_title}}</h1>
    {{if current_tag}}
    <p class="subtitle">Showing links tagged with: <strong>{{:current_tag}}</strong></p>
    {{endif}}
</div>

<div class="add-link-section">
    <h2>Add New Link</h2>
    {{if error}}
    <div class="error-message">{{:error}}</div>
    {{endif}}
    <form action="/links" method="post" class="add-link-form">
        <div class="form-group">
            <input type="url" name="url" placeholder="Enter URL (required)" required class="form-input">
        </div>
        <div class="form-group">
            <input type="text" name="title" placeholder="Title (optional)" class="form-input">
        </div>
        <div class="form-group">
            <input type="text" name="description" placeholder="Description (optional)" class="form-input">
        </div>
        <div class="form-group">
            <input type="text" name="tags" placeholder="Tags (comma-separated)" class="form-input">
        </div>
        <button type="submit" class="btn btn-primary">Save Link</button>
    </form>
</div>

<div class="links-section">
    <h2>Links</h2>
    {{if links}}
    <div class="links-list">
        {{for link in links}}
        <article class="link-card {{if link.IsRead}}link-read{{endif}}">
            <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">
                    {{if link.IsRead}}
                    <span class="badge badge-read">Read</span>
                    {{else}}
                    <span class="badge badge-unread">Unread</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">Added: {{:link.CreatedAt|datetostr,"yyyy-mm-dd hh:nn"}}</span>
            </div>

            <div class="link-actions">
                <a href="/links/{{:link.id}}" class="btn btn-small btn-secondary">Edit</a>
                <form action="/links/{{:link.id}}/toggle-read" method="post" class="inline-form">
                    <button type="submit" class="btn btn-small btn-secondary">
                        {{if link.IsRead}}Mark Unread{{else}}Mark Read{{endif}}
                    </button>
                </form>
                <form action="/links/{{:link.id}}/archive" method="post" class="inline-form">
                    <button type="submit" class="btn btn-small btn-secondary">Archive</button>
                </form>
                <form action="/links/{{:link.id}}/delete" method="post" class="inline-form" onsubmit="return confirm('Are you sure you want to 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 links found. Add your first link above!</p>
    {{endif}}
</div>
{{endblock}}