{% extends "lens/base.html" %}

{% block head:title %}Request Details{% endblock %}

{% block content %}
<div class="bg-white shadow-lg rounded overflow-hidden">
    <div class="px-6 bg-green-800 text-white font-semibold">
        <div class="flex justify-between items-center">
            <span class="py-3">Request Summary</span>
            <form action="{% url 'lens:delete_trace' trace.request_id %}" onsubmit="return confirm('Are you sure you want to delete this request?')" method="POST">
                {% csrf_token %}
                <button type="submit" class="bg-green-900 p-2 rounded hover:bg-green-800 text-green-50 shadow-lg" title="Delete request">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                </button>
            </form>
        </div>
    </div>
    <dl class="text-sm">
        <div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Path
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                <div class="flex items-center space-x-2">
                    <span>
                        {{ trace.data.path }}
                    </span>
                    <a class="text-green-800" href="{{ trace.data.path }}" target="_blank">
                        <!-- External link icon -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                    </a>
                </div>

            </dd>
        </div>
        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Method
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {% include 'lens/components/method.html' with method=trace.data.method only %}
            </dd>
        </div>
        <div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Status Code
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {% include 'lens/components/status.html' with status_code=trace.data.status_code only %}
            </dd>
        </div>
        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Host
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {{ trace.data.host }}
            </dd>
        </div>
        <div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Client IP
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {{ trace.data.remote_addr }}
            </dd>
        </div>
        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Query String
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {{ trace.data.query_string|default:'-' }}
            </dd>
        </div>
        <div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Content Type
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {{ trace.data.content_type }}
            </dd>
        </div>
        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Duration
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {% include 'lens/components/duration.html' with trace=trace only %}
            </dd>
        </div>
        <div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                Start time
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {{ trace.start_time|date:'r' }}
            </dd>
        </div>
        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="font-medium text-gray-500">
                End time
            </dt>
            <dd class="mt-1 text-gray-900 sm:mt-0 sm:col-span-2">
                {{ trace.end_time|date:'r' }}
            </dd>
        </div>
    </dl>
</div>

{% include "lens/panels/request.html" %}


{% endblock %}