{% extends 'layouts/base.html' %}
{% load static %}

{% block title %}Detalhe da Solicitação{% endblock title %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/solicitation.css' %}">
{% endblock extrastyle %}

{% block page_title %}Solicitação{% endblock page_title %}
{% block breadcrumbs %}
  <li class="breadcrumb-item"><a href="#">Solicitação</a></li>
  <li class="breadcrumb-item active" aria-current="page">Detalhes</li>
{% endblock breadcrumbs %}

{% block content %}
<div class="container">
    <h1 class="mt-4">Detalhe da Solicitação</h1>
    
    <div class="row mt-4">
        <!-- Detalhes da Solicitação -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>Solicitação</h5>
                </div>
                <div class="card-body">
                    <p><strong>Protocolo:</strong> {{ solicitation.protocol }}</p>
                    <p><strong>Status:</strong> {{ solicitation.status }}</p>
                    <p><strong>Data da Solicitação:</strong> {{ solicitation.created_at|date:"d/m/Y" }}</p>
                </div>
            </div>
        </div>

        <!-- Participantes -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>Participantes</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        {% for participant in participants %}
                            <li class="list-group-item">
                                {{ participant.user.username | upper }} - {{ participant.user.email }}
                            </li>
                        {% empty %}
                            <li class="list-group-item">Nenhum participante cadastrado.</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Botão de Chat -->
    <div class="row mt-4">
        <div class="col-md-12 text-center">
            <a href="{% url 'administrator:chat_room' solicitation.protocol %}" class="btn btn-primary">Ir para o Chat</a>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<!-- Código JS adicional aqui, se necessário -->
{% endblock extra_js %}