<div class="card" id="links-section">
<div class="card-header">
<h2 class="card-title"><span class="icon">🔗</span> Links</h2>
</div>
<form hx-post="/api/link" hx-swap="none" hx-on::after-request="this.reset()" class="input-group"
style="margin-bottom: 1rem;">
<input type="text" name="url" placeholder="URL" required autocomplete="off" style="flex: 2;">
<input type="text" name="title" placeholder="Title (optional)" autocomplete="off" style="flex: 1;">
<button type="submit">
<span>🔗</span> Add
</button>
</form>
{% if links and links|length > 0 %}
<div class="link-list">
{% for link in links %}
<div class="link-item">
<a href="{{ link.url }}" target="_blank" class="link-url">{{ link.title or link.url }}</a>
<button class="btn-danger" hx-delete="/api/link/{{ link.link_id }}" hx-target="#links-section"
hx-swap="none" hx-confirm="Delete this link?">
🗑️
</button>
</div>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
<div class="icon">✨</div>
<p>No links yet. Add one above!</p>
</div>
{% endif %}
</div>