{% extends "base.html" %}
{% load static %}
{% block title %}
    Trademark Search Results
{% endblock title %}
{% block description %}
    View the results of your trademark search, including registration numbers, serial numbers, filing dates, owner details, and status labels from the USPTO.
{% endblock description %}
{% block keywords %}
    Trademark Search Results, USPTO, Patent and Trademark, Search Trademarks, Trademark Details, Owner Information
{% endblock keywords %}
{% block og_title %}
    Trademark Search Results - Detailed Trademark Information
{% endblock og_title %}
{% block og_description %}
    Access detailed trademark search results, including registration numbers, serial numbers, filing dates, owner information, and status labels from the USPTO.
{% endblock og_description %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
        {% if available %}
            <div class="max-w-lg mx-auto bg-white rounded-2xl shadow-lg overflow-hidden">
                <div class="relative p-8 text-center">
                    <img class="mx-auto h-32 w-32 mb-6"
                         height="128"
                         width="128"
                         alt="Trademark available Image"
                         src="{% static 'img/TM.png' %}">
                    <h2 class="text-3xl font-bold text-gray-900 mb-2">Available!</h2>
                    <p class="text-lg text-gray-600 mb-8">Trademark is available for Registration</p>
                    <div class="flex gap-4 justify-center">
                        <a href="{% url 'home' %}"
                           class="inline-flex items-center px-6 py-3 bg-[#e74c3c] text-white font-semibold rounded-lg hover:bg-opacity-90 transition-colors">
                            <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" />
                            </svg>
                            Back
                        </a>
                        <a href="{% url 'trademark_search' %}"
                           class="inline-flex items-center px-6 py-3 bg-[#e74c3c] text-white font-semibold rounded-lg hover:bg-opacity-90 transition-colors">
                            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            Search More
                        </a>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="max-w-[95%] mx-auto">
                <div class="flex items-center justify-between mb-6">
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">
                        Search Results
                        <span class="ml-2 text-lg text-gray-500">{{ count }} results found for "{{ query }}"</span>
                    </h1>
                    <a href="{% url 'trademark_search' %}"
                       class="inline-flex items-center px-4 py-2 bg-[#e74c3c] text-white font-semibold rounded-lg hover:bg-opacity-90 transition-colors">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        New Search
                    </a>
                </div>
                <div class="overflow-x-auto bg-white rounded-xl shadow-md">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Registration Info</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dates</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Owner Details</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for item in items %}
                                {% for owner in item.owners %}
                                    <tr class="hover:bg-gray-50 cursor-pointer transition-colors"
                                        onclick="window.open('https://tsdr.uspto.gov/#caseNumber={{ item.serial_number }}&caseType=SERIAL_NO&searchType=statusSearch', '_blank')">
                                        <td class="px-6 py-4">
                                            <div class="text-lg font-semibold text-[#e74c3c] hover:underline">{{ item.keyword }}</div>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="text-sm">
                                                <div class="font-medium text-gray-900">Reg #: {{ item.registration_number }}</div>
                                                <div class="text-gray-500">Serial #: {{ item.serial_number }}</div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="text-sm">
                                                <div class="text-gray-900">Filed: {{ item.filing_date }}</div>
                                                <div class="text-gray-500">Registered: {{ item.registration_date }}</div>
                                                <div class="text-gray-500">Expires: {{ item.expiration_date }}</div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="text-sm">
                                                <div class="font-medium text-gray-900">{{ owner.name }}</div>
                                                <div class="text-gray-500">
                                                    {{ owner.address1 }}
                                                    {% if owner.address2 %}{{ owner.address2 }},{% endif %}
                                                    {{ owner.city }}, {{ owner.state }}
                                                    {% if owner.country %}, {{ owner.country }}{% endif %}
                                                    {% if owner.postcode %}{{ owner.postcode }}{% endif %}
                                                </div>
                                                <div class="text-gray-500">{{ owner.owner_label }}</div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4">
                                            <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full {% if item.status_label == 'Live/Pending' %} bg-yellow-100 text-yellow-800 {% elif item.status_label == 'Live/Registered' %} bg-green-100 text-green-800 {% elif item.status_label == 'Dead/Abandoned' %} bg-red-100 text-red-800 {% else %} bg-blue-100 text-blue-800{% endif %}">
                                                {{ item.status_label }}
                                            </span>
                                            <div class="mt-2 text-sm text-violet-600 font-medium">{{ owner.legal_entity_type_label }}</div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock content %}