{% extends 'layouts/telemetry/app.html' %}

{% block content %}
<main class="container mt-3 px-4 ">
    <div class="row gap-3 mb-5">
        <div class="p-4 col bg-white rounded">
            <h3 class="mb-3 d-flex gap-3"><span><a style="color:#e685b5;" href="{% url 'main_view' %}"><svg
                            xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                            class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
                            <path
                                d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
                        </svg></a></span><span>Детальная</span></h3>
            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-main-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-main" type="button" role="tab" aria-controls="pills-main"
                        aria-selected="true">Основная</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-meta-tab" data-bs-toggle="pill" data-bs-target="#pills-meta"
                        type="button" role="tab" aria-controls="pills-meta" aria-selected="false">Мета
                        информаций</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-headers-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-headers" type="button" role="tab" aria-controls="pills-headers"
                        aria-selected="false">Загаловки</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-get-tab" data-bs-toggle="pill" data-bs-target="#pills-get"
                        type="button" role="tab" aria-controls="pills-get" aria-selected="false">GET запросы</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-post-tab" data-bs-toggle="pill" data-bs-target="#pills-post"
                        type="button" role="tab" aria-controls="pills-post" aria-selected="false">POST запросы</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-response-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-response" type="button" role="tab" aria-controls="pills-response"
                        aria-selected="false">Ответ от сервера</button>
                </li>

            </ul>
            <div class="tab-content" id="pills-tabContent">

                <div class="tab-pane fade show active" id="pills-main" role="tabpanel" aria-labelledby="pills-main-tab"
                    tabindex="0">
                    <div class="row">
                        <div class="p4 col ">
                            <div class="mb-3">
                                <h6 class="text-secondary">Хост</h6>
                                <p>{{telemetry.host}}</p>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-secondary">Путь</h6>
                                <p>{{telemetry.path}}</p>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-secondary">Метод</h6>
                                <p>{{telemetry.method}}</p>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-secondary">Полный путь</h6>
                                <p>{{telemetry.uri}}</p>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-secondary">Статус</h6>
                                <p>{{telemetry.status_code}}</p>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-secondary">User Agent</h6>
                                <p>{{telemetry.user_agent}}</p>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-secondary">Remote address</h6>
                                <p>{{telemetry.remote_addr}}</p>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-secondary">Remote address forwarded</h6>
                                <p>{{telemetry.remote_addr_fwd}}</p>
                            </div>
                            <div class="mb-3">
                                <h6 class="text-secondary">Длительность</h6>
                                <p>{{telemetry.duration}} ms</p>
                            </div>
                        </div>
                        <div class="p4 col bg-white rounded">
                            <h4 class="">Выборки</h4>
                            <div class="list-group">
                                {% for query in telemetry.queries.all %}
                                <a href="#" class="list-group-item list-group-item-action" aria-current="true">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">id: {{query.id}}</h5>
                                        <small>{{query.time}} ms</small>
                                    </div>
                                    <p class="mb-1">{{query.sql}}</p>
                                </a>
                                {% endfor %}
                            
                            </div>
                        </div>
                    </div>


                </div>
                <div class="tab-pane fade show " id="pills-meta" role="tabpanel" aria-labelledby="pills-meta-tab"
                    tabindex="1">
                    <pre class="b-pre">{{meta}}
                    </pre>
                </div>
                <div class="tab-pane fade show " id="pills-headers" role="tabpanel" aria-labelledby="pills-headers-tab"
                    tabindex="2">
                    <div class="b-pre">{{telemetry.headers}}
                    </div>
                </div>
                <div class="tab-pane fade show " id="pills-get" role="tabpanel" aria-labelledby="pills-get-tab"
                    tabindex="3">
                    <pre class="b-pre">{{get}}</pre>
                </div>
                <div class="tab-pane fade show " id="pills-post" role="tabpanel" aria-labelledby="pills-post-tab"
                    tabindex="4">
                    <pre class="b-pre">{{telemetry.raw_post}}</pre>
                </div>
                <div class="tab-pane fade show " id="pills-response" role="tabpanel"
                    aria-labelledby="pills-response-tab" tabindex="5">
                    <div class="b-pre">{{telemetry.response}}</div>
                </div>
            </div>
        </div>

    </div>

</main>
{% endblock %}