{{define "content"}}
<style>
.submissions-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1.5em; 
}
.submissions-title { 
    font-size: 1.5em; 
    font-weight: 600; 
}
.filters-section {
    background: #fff;
    padding: 1.2em;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(24,30,42,0.06);
    margin-bottom: 1.5em;
}
.filters-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    align-items: end;
}
.filter-buttons {
    display: flex;
    gap: 0.5em;
    align-items: end;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.filter-group label {
    font-size: 0.85em;
    font-weight: 500;
    color: #374151;
}
.filter-group select, .filter-group input {
    padding: 0.5em;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9em;
}
.filter-btn {
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5em 1em;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.18s;
}
.filter-btn:hover {
    background: #125ea2;
}
.clear-btn {
    background: #6b7280;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5em 1em;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.18s;
}
.clear-btn:hover {
    background: #4b5563;
}
.status-counts {
    display: flex;
    gap: 1em;
    margin-bottom: 1.5em;
    flex-wrap: wrap;
}
.status-count {
    background: #fff;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(24,30,42,0.06);
    text-align: center;
    min-width: 100px;
}
.status-count-number {
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 0.2em;
}
.status-count-label {
    font-size: 0.85em;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-pending { color: #f59e0b; }
.status-sent { color: #10b981; }
.status-failed { color: #ef4444; }
.submissions-table { 
    width: 100%; 
    border-collapse: separate;
    border-spacing: 0;
    background: #fff; 
    border-radius: 10px; 
    box-shadow: 0 2px 12px rgba(24,30,42,0.06); 
    overflow: hidden; 
}
.submissions-table th, .submissions-table td { 
    padding: 1em; 
    text-align: left; 
    border-bottom: 1px solid #e5e7eb;
}
.submissions-table th { 
    background: #f9fafb; 
    color: #374151; 
    font-weight: 600; 
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.submissions-table tr:last-child td {
    border-bottom: none;
}
.submission-row {
    cursor: pointer;
    transition: background-color 0.15s;
}
.submission-row:hover {
    background: #f9fafb;
}
.status-badge {
    padding: 0.25em 0.75em;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}
.status-badge.sent {
    background: #d1fae5;
    color: #065f46;
}
.status-badge.failed {
    background: #fee2e2;
    color: #991b1b;
}
.submission-details {
    display: none;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}
.submission-details.show {
    display: table-row;
}
.submission-details td {
    padding: 1.5em;
}
.field-data {
    background: #fff;
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 1em;
}
.field-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 0;
    border-bottom: 1px solid #e5e7eb;
}
.field-item:last-child {
    border-bottom: none;
}
.field-label {
    font-weight: 500;
    color: #374151;
    flex: 0 0 30%;
}
.field-value {
    flex: 1;
    color: #1f2937;
    word-break: break-word;
}
.error-message {
    background: #fee2e2;
    color: #991b1b;
    padding: 0.75em;
    border-radius: 6px;
    margin-top: 1em;
    font-size: 0.9em;
}
.metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    margin-bottom: 1em;
}
.metadata-item {
    background: #f8fafc;
    padding: 0.75em;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}
.metadata-label {
    font-weight: 500;
    color: #374151;
    font-size: 0.85em;
    margin-bottom: 0.25em;
}
.metadata-value {
    color: #1f2937;
    font-size: 0.9em;
}
</style>

<div class="submissions-header">
    <div class="submissions-title">Form Submissions</div>
</div>

<!-- Status Counts -->
<div class="status-counts">
    <div class="status-count">
        <div class="status-count-number status-sent">{{.StatusCounts.Sent}}</div>
        <div class="status-count-label">Sent</div>
    </div>
    <div class="status-count">
        <div class="status-count-number status-pending">{{.StatusCounts.Pending}}</div>
        <div class="status-count-label">Pending</div>
    </div>
    <div class="status-count">
        <div class="status-count-number status-failed">{{.StatusCounts.Failed}}</div>
        <div class="status-count-label">Failed</div>
    </div>
    <div class="status-count">
        <div class="status-count-number">{{.StatusCounts.Total}}</div>
        <div class="status-count-label">Total</div>
    </div>
</div>

<!-- Filters -->
<div class="filters-section">
    <form method="GET" class="filters-form">
        <div class="filter-group">
            <label for="form">Form</label>
            <select name="form" id="form">
                <option value="">All Forms</option>
                {{range .Forms}}
                <option value="{{index . "ID"}}" {{if eq $.FormFilter (index . "ID")}}selected{{end}}>{{index . "Name"}}</option>
                {{end}}
            </select>
        </div>
        
        <div class="filter-group">
            <label for="status">Status</label>
            <select name="status" id="status">
                <option value="">All Status</option>
                <option value="sent" {{if eq .StatusFilter "sent"}}selected{{end}}>Sent</option>
                <option value="pending" {{if eq .StatusFilter "pending"}}selected{{end}}>Pending</option>
                <option value="failed" {{if eq .StatusFilter "failed"}}selected{{end}}>Failed</option>
            </select>
        </div>

        <div class="filter-group">
            <label for="date_from">From Date</label>
            <input type="date" name="date_from" id="date_from" value="{{.DateFrom}}">
        </div>

        <div class="filter-group">
            <label for="date_to">To Date</label>
            <input type="date" name="date_to" id="date_to" value="{{.DateTo}}">
        </div>
        
        <div class="filter-buttons">
            <button type="submit" class="filter-btn">Filter</button>
            <button type="button" class="clear-btn" onclick="window.location='/submissions'">Clear</button>
        </div>
    </form>
</div>

<!-- Submissions Table -->
<table class="submissions-table">
    <thead>
        <tr>
            <th>Form</th>
            <th>Status</th>
            <th>Submitted</th>
            <th>IP Address</th>
        </tr>
    </thead>
    <tbody>
        {{range $index, $submission := .Submissions}}
        <tr class="submission-row" onclick="toggleDetails({{$index}})">
            <td>{{$submission.FormName}}</td>
            <td><span class="status-badge {{$submission.Status}}">{{$submission.Status}}</span></td>
            <td>{{$submission.SubmittedAt.Format "Jan 2, 2006 at 3:04 PM"}}</td>
            <td>{{$submission.IPAddress}}</td>
        </tr>
        <tr class="submission-details" id="details-{{$index}}">
            <td colspan="4">
                <div class="metadata-grid">
                    <div class="metadata-item">
                        <div class="metadata-label">Submission ID</div>
                        <div class="metadata-value">{{$submission.ID}}</div>
                    </div>
                    <div class="metadata-item">
                        <div class="metadata-label">Form ID</div>
                        <div class="metadata-value">{{$submission.FormID}}</div>
                    </div>
                    <div class="metadata-item">
                        <div class="metadata-label">Status</div>
                        <div class="metadata-value">{{$submission.Status}}</div>
                    </div>
                    <div class="metadata-item">
                        <div class="metadata-label">Submitted At</div>
                        <div class="metadata-value">{{$submission.SubmittedAt.Format "January 2, 2006 at 3:04:05 PM"}}</div>
                    </div>
                </div>
                
                <div class="field-data">
                    <h4 style="margin-bottom: 1em; color: #374151;">Form Data</h4>
                    {{range $submission.FieldsData}}
                    <div class="field-item">
                        <div class="field-label">{{.Label}}</div>
                        <div class="field-value">{{.Value}}</div>
                    </div>
                    {{end}}
                </div>
                
                {{if $submission.ErrorMessage}}
                <div class="error-message">
                    <strong>Error:</strong> {{$submission.ErrorMessage}}
                </div>
                {{end}}
            </td>
        </tr>
        {{else}}
        <tr>
            <td colspan="4" style="text-align: center; color: #6b7280; padding: 2em;">No submissions found</td>
        </tr>
        {{end}}
    </tbody>
</table>

<script>
function toggleDetails(index) {
    const details = document.getElementById('details-' + index);
    details.classList.toggle('show');
}
</script>
{{end}}