85 lines
5.3 KiB
HTML
85 lines
5.3 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% trans "Edit Slide" %} — PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{% static 'css/presentations/slide-theme.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto">
|
|
<nav class="flex items-center gap-2 text-sm text-gray-400 mb-6">
|
|
<a href="{% url 'presentations:list' %}" class="hover:text-navy transition">{% trans "Presentations" %}</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
<a href="{% url 'presentations:detail' pk=presentation.pk %}" class="hover:text-navy transition">{{ presentation.title }}</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
<span class="text-gray-700">{% if slide %}{% trans "Edit Slide" %}{% else %}{% trans "Add Slide" %}{% endif %}</span>
|
|
</nav>
|
|
|
|
<div class="bg-white rounded-2xl border-2 border-gray-200 p-8">
|
|
<h1 class="text-xl font-bold text-gray-800 mb-6">
|
|
{% if slide %}{% trans "Edit Slide" %} #{{ slide.order }}{% else %}{% trans "Add New Slide" %}{% endif %}
|
|
</h1>
|
|
|
|
<form method="post" id="slide-form">
|
|
{% csrf_token %}
|
|
|
|
<div class="space-y-5">
|
|
<div class="grid grid-cols-2 gap-5">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Layout" %} *</label>
|
|
<select name="layout" id="layout-select" class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
|
|
{% for value, label in layout_choices %}
|
|
<option value="{{ value }}" {% if slide and slide.layout == value %}selected{% endif %}>{{ label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Background Color" %}</label>
|
|
<input type="color" name="background_color" value="{% if slide and slide.background_color %}{{ slide.background_color }}{% else %}#ffffff{% endif %}"
|
|
class="w-full h-12 border-2 border-gray-200 rounded-xl cursor-pointer">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Title" %}</label>
|
|
<input type="text" name="title" value="{% if slide %}{{ slide.title }}{% endif %}"
|
|
class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
|
|
placeholder="{% trans 'Slide title' %}">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Subtitle" %}</label>
|
|
<input type="text" name="subtitle" value="{% if slide %}{{ slide.subtitle }}{% endif %}"
|
|
class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
|
|
placeholder="{% trans 'Slide subtitle' %}">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Content" %} <span class="font-normal text-gray-400">({% trans "JSON" %})</span></label>
|
|
<textarea name="content" id="content-editor" rows="15"
|
|
class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm font-mono focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
|
|
placeholder='{ "metrics": [ { "label": "Total", "value": "1,234", "icon": "bar-chart-3" } ] }'>{% if slide and slide.content %}{{ slide.content|safe }}{% endif %}</textarea>
|
|
<p class="text-xs text-gray-400 mt-1">{% trans "Enter JSON content matching the selected layout type" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Speaker Notes" %}</label>
|
|
<textarea name="speaker_notes" rows="4"
|
|
class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
|
|
placeholder="{% trans 'Notes for the presenter (not shown on slide)' %}">{% if slide %}{{ slide.speaker_notes }}{% endif %}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-100">
|
|
<a href="{% url 'presentations:detail' pk=presentation.pk %}" class="px-5 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-800 transition">{% trans "Cancel" %}</a>
|
|
<button type="submit" class="bg-navy text-white px-6 py-2.5 rounded-xl hover:bg-navy/90 transition font-medium text-sm">
|
|
{% if slide %}{% trans "Save Slide" %}{% else %}{% trans "Add Slide" %}{% endif %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|