94 lines
4.7 KiB
HTML
94 lines
4.7 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% trans "Create Report Template" %} — PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.ds-option {
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.ds-option:hover, .ds-option.selected {
|
|
border-color: #005696;
|
|
background: rgba(0,86,150,0.04);
|
|
}
|
|
.ds-option.selected {
|
|
box-shadow: 0 0 0 3px rgba(0,86,150,0.15);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-6 py-8 max-w-3xl">
|
|
<div class="mb-8">
|
|
<a href="{% url 'presentations:template_list' %}" class="text-blue-900 hover:underline text-sm">← Back to Templates</a>
|
|
<h1 class="text-3xl font-bold text-gray-800 mt-4">{% trans "Create Report Template" %}</h1>
|
|
<p class="text-gray-500 mt-1">{% trans "Upload a reference PDF and select a data source to auto-generate a slide template." %}</p>
|
|
</div>
|
|
|
|
<form method="post" enctype="multipart/form-data" id="template-form">
|
|
{% csrf_token %}
|
|
|
|
<div class="bg-white rounded-xl border border-gray-200 p-6 mb-6 space-y-5">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Template Name *</label>
|
|
<input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:border-blue-900 focus:ring-1 focus:ring-blue-900" placeholder="e.g., Doctor Ratings Report">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Slug *</label>
|
|
<input type="text" name="slug" required class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:border-blue-900 focus:ring-1 focus:ring-blue-900" placeholder="e.g., doctor-ratings" id="slug-input">
|
|
<p class="text-xs text-gray-400 mt-1">URL-friendly identifier (auto-generated from name)</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Description</label>
|
|
<textarea name="description" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:border-blue-900 focus:ring-1 focus:ring-blue-900" placeholder="Brief description of this report template"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
|
|
<label class="block text-sm font-semibold text-gray-700 mb-3">Data Source *</label>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="ds-options">
|
|
{% for key, info in data_sources.items %}
|
|
<div class="ds-option" data-source="{{ key }}" onclick="selectSource(this, '{{ key }}')">
|
|
<div class="font-semibold text-gray-800 mb-1">{{ info.label }}</div>
|
|
<div class="text-sm text-gray-500">{{ info.description }}</div>
|
|
<div class="text-xs text-gray-400 mt-2">{{ info.data_keys|length }} data keys available</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<input type="hidden" name="data_source" id="data-source-input" required>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Reference PDF</label>
|
|
<input type="file" name="reference_pdf" accept=".pdf" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 file:mr-4 file:py-1 file:px-4 file:rounded file:border-0 file:bg-blue-900 file:text-white file:font-semibold file:cursor-pointer">
|
|
<p class="text-xs text-gray-400 mt-1">Upload a reference report PDF. The AI will analyze its structure and auto-create slide definitions.</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<a href="{% url 'presentations:template_list' %}" class="text-gray-500 hover:text-gray-700">{% trans "Cancel" %}</a>
|
|
<button type="submit" class="px-8 py-3 bg-blue-900 text-white rounded-lg hover:bg-blue-800 font-semibold">
|
|
{% trans "Create Template" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function selectSource(el, key) {
|
|
document.querySelectorAll('.ds-option').forEach(o => o.classList.remove('selected'));
|
|
el.classList.add('selected');
|
|
document.getElementById('data-source-input').value = key;
|
|
}
|
|
|
|
document.querySelector('[name="name"]').addEventListener('input', function(e) {
|
|
const slug = e.target.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
|
|
document.getElementById('slug-input').value = slug;
|
|
});
|
|
</script>
|
|
{% endblock %}
|