{% extends "_app_base.html" %}
{% block title %}{{ issue.title }} — {{ project.name }}{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="breadcrumbs text-sm mb-2"><ul>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/projects/{{ project.id }}">{{ project.name }}</a></li>
        <li class="max-w-[32ch] truncate">{{ issue.title }}</li>
    </ul></div>

    {% if editing %}
        <div class="card bg-base-100 border border-base-300 shadow-sm">
            <form method="post" action="/projects/{{ project.id }}/issues/{{ issue.id }}" class="card-body gap-3">
                <label class="form-control w-full">
                    <div class="label py-1"><span class="label-text text-sm">Title</span></div>
                    <input type="text" name="title" required maxlength="200" value="{{ issue.title }}"
                           class="input input-bordered input-sm w-full" />
                </label>

                <label class="form-control w-full">
                    <div class="label py-1"><span class="label-text text-sm">Description</span></div>
                    <textarea name="description" rows="8" maxlength="10000"
                              class="textarea textarea-bordered textarea-sm w-full font-mono text-xs">{{ issue.description }}</textarea>
                </label>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <label class="form-control w-full">
                        <div class="label py-1"><span class="label-text text-sm">Status</span></div>
                        <select name="status" class="select select-bordered select-sm w-full">
                            {% for s in statuses %}
                                <option value="{{ s.as_str() }}" {% if s.as_str() == issue.status.as_str() %}selected{% endif %}>
                                    {{ s.label() }}
                                </option>
                            {% endfor %}
                        </select>
                    </label>

                    <label class="form-control w-full">
                        <div class="label py-1"><span class="label-text text-sm">Priority</span></div>
                        <select name="priority" class="select select-bordered select-sm w-full">
                            {% for p in priorities %}
                                <option value="{{ p.as_str() }}" {% if p.as_str() == issue.priority.as_str() %}selected{% endif %}>
                                    {{ p.label() }}
                                </option>
                            {% endfor %}
                        </select>
                    </label>
                </div>

                <div class="card-actions justify-end mt-2">
                    <a href="/projects/{{ project.id }}/issues/{{ issue.id }}" class="btn btn-ghost btn-sm">Cancel</a>
                    <button type="submit" class="btn btn-primary btn-sm">Save</button>
                </div>
            </form>
        </div>
    {% else %}
        <div class="flex items-start justify-between gap-3 mb-3">
            <h1 class="text-xl font-semibold tracking-tight">{{ issue.title }}</h1>
            <div class="flex gap-2 shrink-0">
                <a href="/projects/{{ project.id }}/issues/{{ issue.id }}?edit=1" class="btn btn-ghost btn-sm">Edit</a>
                <form method="post" action="/projects/{{ project.id }}/issues/{{ issue.id }}/delete"
                      onsubmit="return confirm('Delete this issue? This cannot be undone.');">
                    <button type="submit" class="btn btn-ghost btn-sm text-error">Delete</button>
                </form>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-2 text-xs text-base-content/70 mb-4">
            <span class="badge badge-sm badge-ghost">{{ issue.status.label() }}</span>
            <span class="badge badge-sm {{ issue.priority.badge_class() }}">{{ issue.priority.label() }}</span>
            <span>·</span>
            <span>Created {{ issue.created_at.format("%Y-%m-%d %H:%M") }}</span>
            <span>·</span>
            <span>Updated {{ issue.updated_at.format("%Y-%m-%d %H:%M") }}</span>
        </div>

        <div class="card bg-base-100 border border-base-300 shadow-sm">
            <div class="card-body">
                {% if issue.description.is_empty() %}
                    <p class="text-sm italic text-base-content/50">No description provided.</p>
                {% else %}
                    <pre class="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed">{{ issue.description }}</pre>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}