{% extends 'repository/repo_layout.html' %}

{% block title %}New Issue - {{ repo_owner }}/{{ repo_name }}{% endblock %}

{% block repo_content %}
<div class="max-w-4xl mx-auto space-y-6">
    <div class="flex items-center justify-between pb-6 border-b border-white/5">
        <h1 class="text-3xl font-bold tracking-tight text-white flex items-center">
            <span class="mr-3 text-zinc-500 font-light">#</span> New Issue
        </h1>
    </div>

    <form method="POST" action="{{ url_for('issues.new_issue', repo_name=repo_name, repo_owner=repo_owner) }}"
        class="space-y-6">
        <div class="space-y-2">
            <label for="title" class="block text-sm font-bold text-zinc-400 uppercase tracking-wider">Title</label>
            <input type="text" name="title" id="title" required
                class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all outline-none"
                placeholder="Brief description of the issue">
        </div>

        <div class="space-y-2">
            <label for="description"
                class="block text-sm font-bold text-zinc-400 uppercase tracking-wider">Description</label>
            <div
                class="relative rounded-xl overflow-hidden border border-white/10 bg-black/20 focus-within:ring-2 focus-within:ring-blue-500/50 transition-all">
                <textarea name="description" id="description" rows="10"
                    class="w-full bg-transparent border-none px-4 py-3 text-zinc-300 placeholder-zinc-600 resize-none outline-none font-mono text-sm leading-relaxed"
                    placeholder="Detailed explanation... (Markdown supported)"></textarea>

                <div class="absolute bottom-2 right-2 flex gap-2">
                    <button type="button"
                        class="p-1.5 hover:bg-white/10 rounded text-zinc-500 hover:text-white transition-colors"
                        title="Markdown supported">
                        <i data-lucide="file-code" class="h-4 w-4"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3 pt-6 border-t border-white/5">
            <a href="{{ url_for('issues.list_issues', repo_name=repo_name, repo_owner=repo_owner) }}"
                class="px-5 py-2.5 rounded-lg border border-transparent text-zinc-400 hover:text-white hover:bg-white/5 font-medium text-sm transition-all">
                Cancel
            </a>
            <button type="submit"
                class="px-6 py-2.5 rounded-lg bg-green-600 hover:bg-green-500 text-white font-bold text-sm shadow-lg shadow-green-500/20 transition-all flex items-center gap-2">
                <i data-lucide="check-circle" class="h-4 w-4"></i> Submit New Issue
            </button>
        </div>
    </form>
</div>
{% endblock %}