{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load humanize %}
{% providers_media_js %}
{% load custom_tags %}
{% block title %}{{ issue.title }} - GitHub Issue{% endblock %}
{% block description %}View details of GitHub issue: {{ issue.title }}{% endblock %}
{% block keywords %}github, issue, pull request, bug, repository, open source{% endblock %}
{% block og_title %}{{ issue.title }} - GitHub Issue{% endblock %}
{% block og_description %}View details of GitHub issue: {{ issue.title }}{% endblock %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container mx-auto px-4 py-8">
        <!-- Back button -->
        <a href="{% url 'github_issues' %}"
           class="inline-flex items-center text-[#e74c3c] hover:text-red-700 mb-6">
            <svg class="w-5 h-5 mr-2"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Back to Issues
        </a>
        <!-- Issue Header -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <h1 class="text-2xl font-bold">{{ issue.title }}</h1>
                    <a href="{{ issue.url }}"
                       target="_blank"
                       class="text-gray-500 hover:text-[#e74c3c]"
                       title="Open in GitHub">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             class="h-5 w-5"
                             viewBox="0 0 20 20"
                             fill="currentColor">
                            <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
                            <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
                        </svg>
                    </a>
                </div>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {% if issue.state == 'open' %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                    {{ issue.state|title }}
                </span>
            </div>
            <div class="flex items-center text-gray-600 mb-6">
                {% if issue.user_profile and issue.user_profile.github_url %}
                    <a href="{{ issue.user_profile.github_url }}"
                       target="_blank"
                       class="flex items-center hover:text-[#e74c3c]">
                        <img src="{{ issue.user_profile.github_url }}.png"
                             alt="{{ issue.user.login }}"
                             class="w-6 h-6 rounded-full mr-2"
                             width="24"
                             height="24">
                        {{ issue.user.login }}
                    </a>
                {% elif issue.user_profile %}
                    <a href="{% url 'profile' issue.user_profile.user.username %}"
                       class="flex items-center hover:text-[#e74c3c]">
                        {% if issue.user_profile.user_avatar %}
                            <img src="{{ issue.user_profile.user_avatar.url }}"
                                 alt="{{ issue.user.login }}"
                                 class="w-6 h-6 rounded-full mr-2"
                                 width="24"
                                 height="24">
                        {% else %}
                            <img src="{% gravatar_url issue.user_profile.user.email 24 %}"
                                 alt="{{ issue.user.login }}"
                                 class="w-6 h-6 rounded-full mr-2"
                                 width="24"
                                 height="24">
                        {% endif %}
                        {{ issue.user.login }}
                    </a>
                {% else %}
                    <a href="{{ issue.user.html_url }}"
                       target="_blank"
                       class="flex items-center hover:text-[#e74c3c]">
                        <img src="{{ issue.user.avatar_url }}"
                             alt="{{ issue.user.login }}"
                             class="w-6 h-6 rounded-full mr-2"
                             width="24"
                             height="24">
                        {{ issue.user.login }}
                    </a>
                {% endif %}
                <span class="mx-2">•</span>
                <span>Opened {{ issue.created_at|timesince }} ago</span>
                {% if issue.closed_at %}
                    <span class="mx-2">•</span>
                    <span>Closed {{ issue.closed_at|timesince }} ago</span>
                {% endif %}
            </div>
            <!-- Repository Info -->
            <div class="flex items-center mb-6">
                <a href="{{ issue.repo.repo_url }}"
                   target="_blank"
                   class="flex items-center text-gray-700 hover:text-[#e74c3c]">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd">
                        </path>
                    </svg>
                    {{ issue.repo.name }}
                </a>
            </div>
            <!-- Issue Body -->
            <div class="prose max-w-none">{{ issue.body|safe|linebreaks }}</div>
            <!-- Labels -->
            {% if issue.labels %}
                <div class="mt-6">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">Labels</h3>
                    <div class="flex flex-wrap gap-2">
                        {% for label in issue.labels %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
                                  style="background-color: #{{ label.color }}1a;
                                         color: #{{ label.color }}">{{ label.name }}</span>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            <!-- Assignees -->
            {% if issue.assignees %}
                <div class="mt-6">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">Assignees</h3>
                    <div class="flex -space-x-2">
                        {% for assignee in issue.assignees %}
                            <img src="{{ assignee.avatar_url }}"
                                 alt="{{ assignee.login }}"
                                 title="{{ assignee.login }}"
                                 class="w-8 h-8 rounded-full border-2 border-white"
                                 width="32"
                                 height="32">
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
        <!-- Comments Section -->
        {% if issue.comments > 0 %}
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-bold mb-6">Comments ({{ issue.comments }})</h2>
                <div class="space-y-6">
                    {% for comment in issue.comment_list %}
                        <div class="border-b border-gray-200 pb-6 last:border-0 last:pb-0">
                            <div class="flex items-center mb-4">
                                <img src="{{ comment.user.avatar_url }}"
                                     alt="{{ comment.user.login }}"
                                     class="w-8 h-8 rounded-full mr-3"
                                     width="32"
                                     height="32">
                                <div>
                                    <a href="{{ comment.user.html_url }}"
                                       target="_blank"
                                       class="font-medium text-gray-900 hover:text-[#e74c3c]">
                                        {{ comment.user.login }}
                                    </a>
                                    <div class="text-sm text-gray-500">{{ comment.created_at|timesince }} ago</div>
                                </div>
                            </div>
                            <div class="prose max-w-none">{{ comment.body|safe|linebreaks }}</div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
{% endblock content %}