<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>APISEEK Dashboard</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap">
    <link rel="stylesheet" type="text/css" href="/apiseek/static/style.css">
    <style>
        :root {
            --bg-color: #f7f9fc;
            --primary-color: #5a9bd8; /* Calm blue */
            --secondary-color: #4e8c6a; /* Calm green */
            --text-color: #333;
            --light-text: #555;
            --box-bg: #ffffff;
            --border-color: #e0e0e0;
            --toggle-bg: #5a9bd8;
            --toggle-bg-hover: #4a8ac2;
            --detail-bg: #f1f6fa;
        }
        body {
            font-family: 'Open Sans', sans-serif;
            background: var(--bg-color);
            margin: 0;
            padding: 20px;
            color: var(--text-color);
        }
        .container {
            max-width: 1000px;
            margin: auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 40px;
            color: var(--primary-color);
        }
        .api-box {
            background: var(--box-bg);
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
            border-left: 5px solid var(--primary-color);
            transition: transform 0.2s ease-in-out;
        }
        .api-box:hover {
            transform: translateY(-4px);
        }
        .api-title {
            font-size: 1.6em;
            margin-bottom: 15px;
            font-weight: 600;
            color: var(--primary-color);
        }
        .stats-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 15px;
        }
        .stat {
            font-size: 1.1em;
        }
        .stat span {
            font-weight: 600;
            color: var(--secondary-color);
        }
        .method-header {
            font-size: 1.2em;
            color: var(--light-text);
            margin-top: 15px;
            margin-bottom: 8px;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--border-color);
        }
        .toggle-btn {
            background-color: var(--toggle-bg);
            color: #fff;
            border: none;
            padding: 10px 16px;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.2s;
        }
        .toggle-btn:hover {
            background-color: var(--toggle-bg-hover);
        }
        .details {
            display: none;
            margin-top: 15px;
            padding: 15px;
            background: var(--detail-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
        }
        .details .stat {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>APISEEK Ver. 0.2</h1>
        {% for endpoint, data in stats.items() %}
            <div class="api-box">
                <!-- Endpoint title -->
                <div class="api-title">{{ endpoint }}</div>
                
                <!-- Overall basic stats -->
                <div class="stats-summary">
                    <div class="stat">Total Requests: <span>{{ data.requests }}</span></div>
                    <div class="stat">Successful: <span>{{ data.successful }}</span></div>
                    <div class="stat">Failed: <span>{{ data.failed }}</span></div>
                </div>
                
                <!-- Display available HTTP methods (always visible) -->
                {% if data.by_method %}
                    {% for method, mdata in data.by_method.items() %}
                        <div class="method-header">{{ method }}</div>
                    {% endfor %}
                {% endif %}
                
                <!-- Toggle button for more details -->
                <button class="toggle-btn" onclick="toggleDetails(this)">Show More Details</button>
                
                <!-- Hidden details section -->
                <div class="details">
                    <!-- Overall response time metrics -->
                    <div class="stats-summary">
                        <div class="stat">Avg Response: <span>{{ data.response_stats.avg if data.response_stats.avg is not none else "N/A" }}</span> sec</div>
                        <div class="stat">Min Response: <span>{{ data.response_stats.min if data.response_stats.min is not none else "N/A" }}</span> sec</div>
                        <div class="stat">Max Response: <span>{{ data.response_stats.max if data.response_stats.max is not none else "N/A" }}</span> sec</div>
                        <div class="stat">Median Response: <span>{{ data.response_stats.median if data.response_stats.median is not none else "N/A" }}</span> sec</div>
                    </div>
                    
                    <!-- Per-method detailed metrics -->
                    {% if data.by_method %}
                        {% for method, mdata in data.by_method.items() %}
                            {% if mdata.recent %}
                                <div class="stats-summary">
                                    <div class="stat">Most Recent Call:</div>
                                    <div class="stat">Timestamp: <span>{{ mdata.recent.timestamp }}</span></div>
                                    <div class="stat">Response Time: <span>{{ mdata.recent.response_time }}</span> sec</div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
    
    <script>
        function toggleDetails(button) {
            var detailsDiv = button.nextElementSibling;
            if (detailsDiv.style.display === "none" || detailsDiv.style.display === "") {
                detailsDiv.style.display = "block";
                button.innerText = "Show Less Details";
            } else {
                detailsDiv.style.display = "none";
                button.innerText = "Show More Details";
            }
        }
    </script>
</body>
</html>
