637 lines
31 KiB
HTML
637 lines
31 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% if object %}Edit Ward{% else %}Add Ward{% endif %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-1">
|
|
{% if object %}
|
|
<i class="fas fa-edit me-2"></i>Edit Ward
|
|
{% else %}
|
|
<i class="fas fa-hospital me-2"></i>Add Ward
|
|
{% endif %}
|
|
</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{% url 'inpatients:dashboard' %}">Inpatients</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'inpatients:ward_list' %}">Wards</a></li>
|
|
{% if object %}
|
|
<li class="breadcrumb-item"><a href="{% url 'inpatients:ward_detail' object.pk %}">{{ object.name }}</a></li>
|
|
<li class="breadcrumb-item active">Edit</li>
|
|
{% else %}
|
|
<li class="breadcrumb-item active">Add</li>
|
|
{% endif %}
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a href="{% if object %}{% url 'inpatients:ward_detail' object.pk %}{% else %}{% url 'inpatients:ward_list' %}{% endif %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-2"></i>Back
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" novalidate>
|
|
{% csrf_token %}
|
|
|
|
<div class="row">
|
|
<!-- Main Form -->
|
|
<div class="col-lg-8">
|
|
<!-- Basic Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-info-circle me-2"></i>Basic Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="{{ form.ward_id.id_for_label }}" class="form-label">
|
|
Ward ID <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.ward_id }}
|
|
{% if form.ward_id.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.ward_id.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="form-text">Unique identifier for the ward</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="{{ form.name.id_for_label }}" class="form-label">
|
|
Ward Name <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.name }}
|
|
{% if form.name.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="{{ form.ward_type.id_for_label }}" class="form-label">
|
|
Ward Type <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.ward_type }}
|
|
{% if form.ward_type.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.ward_type.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="{{ form.specialty.id_for_label }}" class="form-label">
|
|
Medical Specialty <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.specialty }}
|
|
{% if form.specialty.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.specialty.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.description.id_for_label }}" class="form-label">
|
|
Description
|
|
</label>
|
|
{{ form.description }}
|
|
{% if form.description.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.description.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="form-text">Brief description of the ward's purpose and services</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Capacity Configuration -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-bed me-2"></i>Capacity Configuration
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="mb-3">
|
|
<label for="{{ form.total_beds.id_for_label }}" class="form-label">
|
|
Total Beds <span class="text-danger">*</span>
|
|
</label>
|
|
{{ form.total_beds }}
|
|
{% if form.total_beds.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.total_beds.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="mb-3">
|
|
<label for="{{ form.private_rooms.id_for_label }}" class="form-label">
|
|
Private Rooms
|
|
</label>
|
|
{{ form.private_rooms }}
|
|
{% if form.private_rooms.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.private_rooms.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="mb-3">
|
|
<label for="{{ form.semi_private_rooms.id_for_label }}" class="form-label">
|
|
Semi-Private Rooms
|
|
</label>
|
|
{{ form.semi_private_rooms }}
|
|
{% if form.semi_private_rooms.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.semi_private_rooms.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="mb-3">
|
|
<label for="{{ form.shared_rooms.id_for_label }}" class="form-label">
|
|
Shared Rooms
|
|
</label>
|
|
{{ form.shared_rooms }}
|
|
{% if form.shared_rooms.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.shared_rooms.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info" role="alert">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>Note:</strong> The sum of private, semi-private, and shared rooms should equal the total number of beds.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location and Management -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-map-marker-alt me-2"></i>Location and Management
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="{{ form.building.id_for_label }}" class="form-label">
|
|
Building
|
|
</label>
|
|
{{ form.building }}
|
|
{% if form.building.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.building.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="{{ form.floor.id_for_label }}" class="form-label">
|
|
Floor
|
|
</label>
|
|
{{ form.floor }}
|
|
{% if form.floor.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.floor.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3">
|
|
<label for="{{ form.wing.id_for_label }}" class="form-label">
|
|
Wing/Section
|
|
</label>
|
|
{{ form.wing }}
|
|
{% if form.wing.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.wing.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="{{ form.nurse_manager.id_for_label }}" class="form-label">
|
|
Nurse Manager
|
|
</label>
|
|
{{ form.nurse_manager }}
|
|
{% if form.nurse_manager.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.nurse_manager.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="{{ form.phone_extension.id_for_label }}" class="form-label">
|
|
Phone Extension
|
|
</label>
|
|
{{ form.phone_extension }}
|
|
{% if form.phone_extension.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{{ form.phone_extension.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features and Equipment -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-cogs me-2"></i>Features and Equipment
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="mb-3">Ward Features</h6>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="has_isolation_rooms" name="has_isolation_rooms"
|
|
{% if form.has_isolation_rooms.value %}checked{% endif %}>
|
|
<label class="form-check-label" for="has_isolation_rooms">
|
|
Isolation Rooms Available
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="has_telemetry" name="has_telemetry"
|
|
{% if form.has_telemetry.value %}checked{% endif %}>
|
|
<label class="form-check-label" for="has_telemetry">
|
|
Telemetry Monitoring
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="has_oxygen" name="has_oxygen"
|
|
{% if form.has_oxygen.value %}checked{% endif %}>
|
|
<label class="form-check-label" for="has_oxygen">
|
|
Oxygen Supply
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="has_suction" name="has_suction"
|
|
{% if form.has_suction.value %}checked{% endif %}>
|
|
<label class="form-check-label" for="has_suction">
|
|
Suction Equipment
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="mb-3">Additional Equipment</h6>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="has_nurse_call" name="has_nurse_call"
|
|
{% if form.has_nurse_call.value %}checked{% endif %}>
|
|
<label class="form-check-label" for="has_nurse_call">
|
|
Nurse Call System
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="has_wifi" name="has_wifi"
|
|
{% if form.has_wifi.value %}checked{% endif %}>
|
|
<label class="form-check-label" for="has_wifi">
|
|
WiFi Access
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="has_tv" name="has_tv"
|
|
{% if form.has_tv.value %}checked{% endif %}>
|
|
<label class="form-check-label" for="has_tv">
|
|
Television
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="has_family_area" name="has_family_area"
|
|
{% if form.has_family_area.value %}checked{% endif %}>
|
|
<label class="form-check-label" for="has_family_area">
|
|
Family Waiting Area
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Form Actions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-cog me-2"></i>Actions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-2"></i>
|
|
{% if object %}Update Ward{% else %}Create Ward{% endif %}
|
|
</button>
|
|
<a href="{% if object %}{% url 'inpatients:ward_detail' object.pk %}{% else %}{% url 'inpatients:ward_list' %}{% endif %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</a>
|
|
<button type="button" class="btn btn-outline-info" onclick="clearForm()">
|
|
<i class="fas fa-eraser me-2"></i>Clear Form
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ward Type Guide -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-question-circle me-2"></i>Ward Type Guide
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="accordion" id="wardTypeGuide">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#generalWards">
|
|
General Wards
|
|
</button>
|
|
</h2>
|
|
<div id="generalWards" class="accordion-collapse collapse" data-bs-parent="#wardTypeGuide">
|
|
<div class="accordion-body">
|
|
<ul class="list-unstyled mb-0">
|
|
<li><strong>General Medical:</strong> General medical patients</li>
|
|
<li><strong>Surgical:</strong> Post-operative patients</li>
|
|
<li><strong>Emergency:</strong> Emergency department patients</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#specialtyWards">
|
|
Specialty Wards
|
|
</button>
|
|
</h2>
|
|
<div id="specialtyWards" class="accordion-collapse collapse" data-bs-parent="#wardTypeGuide">
|
|
<div class="accordion-body">
|
|
<ul class="list-unstyled mb-0">
|
|
<li><strong>ICU:</strong> Intensive care patients</li>
|
|
<li><strong>CCU:</strong> Cardiac care patients</li>
|
|
<li><strong>NICU:</strong> Neonatal intensive care</li>
|
|
<li><strong>Maternity:</strong> Obstetric patients</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Capacity Calculator -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-calculator me-2"></i>Capacity Calculator
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Room Distribution</label>
|
|
<div class="progress mb-2" style="height: 20px;">
|
|
<div class="progress-bar bg-success" id="private-bar" style="width: 0%"></div>
|
|
<div class="progress-bar bg-info" id="semi-private-bar" style="width: 0%"></div>
|
|
<div class="progress-bar bg-warning" id="shared-bar" style="width: 0%"></div>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<small><span class="badge bg-success">Private</span> <span id="private-count">0</span></small>
|
|
<small><span class="badge bg-info">Semi-Private</span> <span id="semi-private-count">0</span></small>
|
|
<small><span class="badge bg-warning">Shared</span> <span id="shared-count">0</span></small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-sm" id="capacity-alert" style="display: none;">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
<span id="capacity-message"></span>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<h6>Total Beds: <span id="total-calculated">0</span></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
// Ward form functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add Bootstrap classes to form elements
|
|
const form = document.querySelector('form');
|
|
const inputs = form.querySelectorAll('input, select, textarea');
|
|
|
|
inputs.forEach(input => {
|
|
if (!input.classList.contains('form-control') && !input.classList.contains('form-select') && !input.classList.contains('form-check-input')) {
|
|
if (input.tagName === 'SELECT') {
|
|
input.classList.add('form-select');
|
|
} else if (input.type !== 'checkbox') {
|
|
input.classList.add('form-control');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Initialize capacity calculator
|
|
updateCapacityCalculator();
|
|
|
|
// Add event listeners for capacity inputs
|
|
['total_beds', 'private_rooms', 'semi_private_rooms', 'shared_rooms'].forEach(fieldName => {
|
|
const field = document.getElementById(`id_${fieldName}`);
|
|
if (field) {
|
|
field.addEventListener('input', updateCapacityCalculator);
|
|
}
|
|
});
|
|
});
|
|
|
|
function updateCapacityCalculator() {
|
|
const totalBeds = parseInt(document.getElementById('id_total_beds').value) || 0;
|
|
const privateRooms = parseInt(document.getElementById('id_private_rooms').value) || 0;
|
|
const semiPrivateRooms = parseInt(document.getElementById('id_semi_private_rooms').value) || 0;
|
|
const sharedRooms = parseInt(document.getElementById('id_shared_rooms').value) || 0;
|
|
|
|
const calculatedTotal = privateRooms + semiPrivateRooms + sharedRooms;
|
|
|
|
// Update progress bar
|
|
if (totalBeds > 0) {
|
|
const privatePercent = (privateRooms / totalBeds) * 100;
|
|
const semiPrivatePercent = (semiPrivateRooms / totalBeds) * 100;
|
|
const sharedPercent = (sharedRooms / totalBeds) * 100;
|
|
|
|
document.getElementById('private-bar').style.width = privatePercent + '%';
|
|
document.getElementById('semi-private-bar').style.width = semiPrivatePercent + '%';
|
|
document.getElementById('shared-bar').style.width = sharedPercent + '%';
|
|
}
|
|
|
|
// Update counts
|
|
document.getElementById('private-count').textContent = privateRooms;
|
|
document.getElementById('semi-private-count').textContent = semiPrivateRooms;
|
|
document.getElementById('shared-count').textContent = sharedRooms;
|
|
document.getElementById('total-calculated').textContent = calculatedTotal;
|
|
|
|
// Show alert if mismatch
|
|
const alert = document.getElementById('capacity-alert');
|
|
const message = document.getElementById('capacity-message');
|
|
|
|
if (calculatedTotal !== totalBeds && totalBeds > 0) {
|
|
alert.style.display = 'block';
|
|
alert.className = 'alert alert-sm alert-warning';
|
|
message.textContent = `Room distribution (${calculatedTotal}) doesn't match total beds (${totalBeds})`;
|
|
} else if (calculatedTotal === totalBeds && totalBeds > 0) {
|
|
alert.style.display = 'block';
|
|
alert.className = 'alert alert-sm alert-success';
|
|
message.textContent = 'Room distribution matches total beds';
|
|
} else {
|
|
alert.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function clearForm() {
|
|
if (confirm('Are you sure you want to clear all form data?')) {
|
|
const form = document.querySelector('form');
|
|
const inputs = form.querySelectorAll('input, select, textarea');
|
|
|
|
inputs.forEach(input => {
|
|
if (input.type !== 'hidden' && input.name !== 'csrfmiddlewaretoken') {
|
|
if (input.type === 'checkbox') {
|
|
input.checked = false;
|
|
} else {
|
|
input.value = '';
|
|
}
|
|
}
|
|
});
|
|
|
|
updateCapacityCalculator();
|
|
}
|
|
}
|
|
|
|
// Form submission with loading state
|
|
document.querySelector('form').addEventListener('submit', function() {
|
|
const submitBtn = document.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.innerHTML;
|
|
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
|
|
submitBtn.disabled = true;
|
|
|
|
// Re-enable if form validation fails
|
|
setTimeout(() => {
|
|
if (document.querySelector('.is-invalid')) {
|
|
submitBtn.innerHTML = originalText;
|
|
submitBtn.disabled = false;
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
// Real-time validation
|
|
document.querySelectorAll('input[required], select[required]').forEach(input => {
|
|
input.addEventListener('blur', function() {
|
|
if (this.value.trim() === '') {
|
|
this.classList.add('is-invalid');
|
|
} else {
|
|
this.classList.remove('is-invalid');
|
|
}
|
|
});
|
|
|
|
input.addEventListener('input', function() {
|
|
if (this.classList.contains('is-invalid') && this.value.trim() !== '') {
|
|
this.classList.remove('is-invalid');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.is-invalid {
|
|
border-color: #dc3545;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875em;
|
|
color: #dc3545;
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
background-color: #e7f1ff;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.text-danger {
|
|
color: #dc3545 !important;
|
|
}
|
|
|
|
.alert-sm {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.progress {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.form-check-label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.row.mb-4 .col-md-3,
|
|
.row.mb-4 .col-md-4,
|
|
.row.mb-4 .col-md-6 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.d-flex.justify-content-between {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|