kaauh_ats/templates/forms/form_submission_details.html

162 lines
6.9 KiB
HTML

{% extends "base.html" %}
{% load form_filters %}
{% block title %}{{ form.name }} - Submission Details{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2>Submission Details</h2>
<a href="{% url 'form_template_submissions_list' template.slug %}" class="btn btn-outline-secondary">
<i class="fas fa-arrow-left"></i> Back to Submissions
</a>
</div>
</div>
</div>
<!-- Basic Information -->
<div class="card mb-3">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<strong>Submission ID:</strong> {{ submission.id }}
</div>
<div class="col-md-4">
<strong>Submitted:</strong> {{ submission.submitted_at|date:"M d, Y H:i" }}
</div>
<div class="col-md-4">
<strong>Form:</strong> {{ form.name }}
</div>
</div>
{% if submission.applicant_name or submission.applicant_email %}
<div class="row mt-2">
{% if submission.applicant_name %}
<div class="col-md-6">
<strong>Applicant Name:</strong> {{ submission.applicant_name }}
</div>
{% endif %}
{% if submission.applicant_email %}
<div class="col-md-6">
<strong>Email:</strong> {{ submission.applicant_email }}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
<!-- Responses Table -->
<div class="card">
<div class="card-body">
<h5 class="mb-3">Responses</h5>
{% with submission=submission %}
{% get_all_responses_flat submission as flat_responses %}
{% if flat_responses %}
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead class="table-light">
<tr>
<th scope="col" style="width: 150px;">Field Label</th>
{% for response in flat_responses %}
<th scope="col">{{ response.field_label }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
<tr>
<td><strong>Response Value</strong></td>
{% for response in flat_responses %}
<td>
{% if response.uploaded_file %}
<div>
<span class="text-primary"><i class="fas fa-file"></i> {{ response.uploaded_file.name }}</span>
<a href="{{ response.uploaded_file.url }}" class="btn btn-sm btn-outline-primary ms-2" target="_blank" title="Download File">
<i class="fas fa-download"></i>
</a>
</div>
{% elif response.value %}
{% if response.field_type == 'checkbox' and response.value|length > 0 %}
<div>
{% for val in response.value %}
<span class="badge bg-secondary me-1">{{ val }}</span>
{% endfor %}
</div>
{% elif response.field_type == 'radio' or response.field_type == 'select' %}
<span class="badge bg-info">{{ response.value }}</span>
{% else %}
<p class="mb-0">{{ response.value|linebreaksbr }}</p>
{% endif %}
{% else %}
<span class="text-muted">Not provided</span>
{% endif %}
</td>
{% endfor %}
</tr>
<tr>
<td><strong>Stage</strong></td>
{% for response in flat_responses %}
<td>
{{ response.stage_name|default:"N/A" }}
</td>
{% endfor %}
</tr>
<tr>
<td><strong>Required</strong></td>
{% for response in flat_responses %}
<td>
{% if response.required %}
<span class="text-danger"><i class="fas fa-asterisk"></i> Yes</span>
{% else %}
<span>No</span>
{% endif %}
</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
{% else %}
<div class="text-center text-muted py-4">
<p>No responses found for this submission.</p>
</div>
{% endif %}
{% endwith %}
</div>
</div>
</div>
{% endblock %}
{% block extra_css %}
<style>
/* Minimal styling */
.table th {
border-top: none;
font-weight: 600;
color: #495057;
vertical-align: top;
white-space: nowrap;
}
.table td {
vertical-align: top;
}
.response-value {
max-width: 300px;
}
.table th:first-child,
.table td:first-child {
background-color: #f8f9fa;
font-weight: 600;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
background-color: rgba(0, 0, 0, 0.02);
}
.table-bordered th,
.table-bordered td {
border: 1px solid #dee2e6;
}
</style>
{% endblock %}