{% load i18n %}

<style>
    .djdt-profiling-panel {
        padding: 10px;
    }

    .djdt-profiling-stats {
        display: flex;
        gap: 30px;
        margin-bottom: 30px;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #e0e0e0;
    }

    .djdt-profiling-stat {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .djdt-profiling-stat-label {
        opacity: 0.7;
    }

    .djdt-profiling-stat-value {
        font-weight: bold;
    }

    .djdt-profiling-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9em;
    }

    .djdt-profiling-table th {
        padding: 8px;
        text-align: left;
        font-weight: bold;
    }

    .djdt-profiling-table td {
        padding: 8px;
    }

    .djdt-profile-link {
        text-decoration: none;
        font-weight: bold;
    }

    .djdt-profile-link:hover {
        text-decoration: underline;
    }

    .djdt-profile-delete {
        text-decoration: none;
        font-weight: bold;
    }

    .djdt-profile-delete:hover {
        text-decoration: underline;
    }

    .djdt-no-profiles {
        padding: 20px;
        text-align: center;
        font-style: italic;
    }

    .djdt-circular-buffer-note {
        padding: 8px;
        border-radius: 3px;
        margin-bottom: 10px;
        font-size: 3.85em;
    }
</style>

<div class="djdt-profiling-panel">
    <div class="djdt-profiling-stats">
        <div class="djdt-profiling-stat">
            <div class="djdt-profiling-stat-label">Status:</div>
            <div class="djdt-profiling-stat-value">
                {% if enabled %}Enabled{% else %}Disabled{% endif %}
            </div>
        </div>

        <div class="djdt-profiling-stat">
            <div class="djdt-profiling-stat-label">Profiles:</div>
            <div class="djdt-profiling-stat-value" id="profile-count">{{ count }}</div>
        </div>

        <div class="djdt-profiling-stat">
            <div class="djdt-profiling-stat-label">Size:</div>
            <div class="djdt-profiling-stat-value" id="total-size">{{ total_size }}</div>
        </div>

        <div class="djdt-profiling-stat">
            <div class="djdt-profiling-stat-label">Directory:</div>
            <div class="djdt-profiling-stat-value">{{ directory }}</div>
        </div>

        <div class="djdt-profiling-stat" style="margin-left: auto;">
            <a href="#" onclick="if(confirm('Delete all profiles?')){let rows=document.querySelectorAll('#profiling-tbody tr');let promises=[];rows.forEach(row=>{let filename=row.dataset.filename;if(filename)promises.push(fetch('/__debug__/profiling/delete/'+filename+'/').then(r=>r.json()).catch(e=>({error:e.toString()})));});Promise.all(promises).then(results=>{let success_count=0;let is_deleted=0;let failures=0;results.forEach(r=>{if(r.success)success_count++;else if(r.is_deleted)is_deleted++;else failures++;});document.getElementById('profiling-tbody').innerHTML='';document.getElementById('profiling-table').outerHTML='<div class=djdt-no-profiles>No profiles found</div>';document.getElementById('profile-count').textContent='0';document.getElementById('total-size').textContent='0 B';let panels=document.querySelectorAll('.djDebugPanelButton');panels.forEach(p=>{if(p.textContent.includes('Profiles')){let small=p.querySelector('small');if(small)small.textContent='0 profiles';}});if(failures>0){alert('Deleted '+success_count+' profiles. '+failures+' failed (may have been removed by circular buffer).');}}).catch(e=>alert('Error during bulk delete: '+e));}return false;" style="color: #d32f2f; font-weight: bold; text-decoration: none;">
                Delete All
            </a>
        </div>
    </div>

    <br>

    <div class="djdt-circular-buffer-note">
        <strong>Note:</strong> The ten most recent profiles are kept, and the remainder are removed.
    </div>

    <br>

    {% if not enabled %}
        <div style="padding: 10px; margin-bottom: 15px; font-size: 0.9em; opacity: 0.7;">
            Set PROFILING_ENABLED=True to enable profiling
        </div>
    {% endif %}

    {% if profiles %}
        <table class="djdt-profiling-table" id="profiling-table">
            <thead>
                <tr>
                    <th>Method</th>
                    <th>Path</th>
                    <th>Duration</th>
                    <th>Time</th>
                    <th>Size</th>
                    <th>View</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody id="profiling-tbody">
                {% for profile in profiles %}
                <tr data-filename="{{ profile.filename }}">
                    <td>
                        <span>{{ profile.method }}</span>
                    </td>
                    <td>{{ profile.path }}</td>
                    <td>{{ profile.duration }}</td>
                    <td>{{ profile.modified }}</td>
                    <td>{{ profile.size }}</td>
                    <td>
                        <a href="{% url 'djdt:profiling_view' profile.filename %}" target="_blank" class="djdt-profile-link">
                            View
                        </a>
                    </td>
                    <td>
                        <a href="#" onclick="if(confirm('Delete this profile?')){fetch('/__debug__/profiling/delete/{{ profile.filename }}/').then(r=>r.json()).then(d=>{if(d.success||d.is_deleted){let row=this.closest('tr');row.remove();let count=document.querySelectorAll('#profiling-tbody tr').length;document.getElementById('profile-count').textContent=count;fetch('/__debug__/profiling/list/').then(r=>r.json()).then(data=>{document.getElementById('total-size').textContent=data.total_size;});let panels=document.querySelectorAll('.djDebugPanelButton');panels.forEach(p=>{if(p.textContent.includes('Profiles')){let small=p.querySelector('small');if(small)small.textContent=count+' profiles';}});if(count===0){document.getElementById('profiling-table').outerHTML='<div class=djdt-no-profiles>No profiles found</div>';}if(d.is_deleted){alert('Profile was already removed (circular buffer)');}}else if(d.error){alert('Failed to delete: '+d.error);}}).catch(e=>{console.error('Delete error:',e);alert('Network error while deleting');});}return false;" class="djdt-profile-delete">
                            Delete
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="djdt-no-profiles">
            No profiles found in {{ directory }}
        </div>
    {% endif %}
</div>