81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
<!-- templates/detail.html -->
|
|
{% extends "base.html" %}
|
|
{% block content %}
|
|
<article class="max-w-none">
|
|
<div class="flex items-start justify-between gap-4 mb-4">
|
|
<h1 class="text-2xl font-semibold leading-tight break-words">
|
|
{{ item.title or "Untitled" }}
|
|
</h1>
|
|
<form action="/readitlater/item/{{ item.id }}/delete" method="post"
|
|
onsubmit="return confirm('Delete this item?')">
|
|
<button
|
|
type="submit"
|
|
title="Delete"
|
|
aria-label="Delete"
|
|
class="text-white bg-red-600 hover:bg-red-700 focus:ring-2 focus:ring-red-300 rounded px-3 py-1">
|
|
✕ Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-3 text-sm text-slate-500 mb-4">
|
|
{% if item.url %}
|
|
<a class="text-blue-700 hover:underline break-all" href="{{ item.url }}" target="_blank" rel="noopener noreferrer">
|
|
{{ item.url }}
|
|
</a>
|
|
{% endif %}
|
|
<span class="text-slate-400">•</span>
|
|
<span class="text-slate-400">{{ item.added_at|format_est }}</span>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
{% include "tags.html" with context %}
|
|
|
|
{% if tags_all %}
|
|
<div class="mt-3 mb-2">
|
|
<div class="text-xs text-slate-500 mb-1">Quick add tag:</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for t in tags_all %}
|
|
{% set name = t.name if t.name is defined else t['name'] %}
|
|
<button
|
|
type="button"
|
|
class="text-xs rounded-full px-2 py-1 border bg-slate-100 text-slate-800 border-slate-200 hover:bg-slate-200"
|
|
hx-post="/readitlater/item/{{ item.id }}/tag"
|
|
hx-vals='{"name": "{{ name|e }}"}'
|
|
hx-target="#tags-{{ item.id }}"
|
|
hx-swap="outerHTML"
|
|
title="Add #{{ name }}">
|
|
#{{ name }}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form
|
|
class="mt-2 flex items-center gap-2"
|
|
hx-post="/readitlater/item/{{ item.id }}/tag"
|
|
hx-target="#tags-{{ item.id }}"
|
|
hx-swap="outerHTML">
|
|
<input
|
|
type="text" name="name" placeholder="Add tag…"
|
|
class="border rounded px-2 py-1 text-sm" />
|
|
<button
|
|
type="submit"
|
|
class="text-white bg-slate-800 hover:bg-slate-900 rounded px-3 py-1 text-sm">
|
|
+ Add
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="max-w-none [&_p]:mb-4">
|
|
{% if item.content_html %}
|
|
{{ item.content_html|safe }}
|
|
{% else %}
|
|
<pre class="bg-slate-100 p-3 rounded text-sm whitespace-pre-wrap">{{ item.content_text }}</pre>
|
|
{% endif %}
|
|
</div>
|
|
</article>
|
|
{% endblock %}
|