102 lines
4.7 KiB
HTML
102 lines
4.7 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ title }} - {% trans "Observation Categories" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-4">
|
|
<ol class="flex items-center gap-2 text-sm text-slate">
|
|
<li><a href="{% url 'observations:observation_list' %}" class="text-blue hover:text-navy font-medium">{% trans "Observations" %}</a></li>
|
|
<li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
|
|
<li><a href="{% url 'observations:category_list' %}" class="text-blue hover:text-navy font-medium">{% trans "Categories" %}</a></li>
|
|
<li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
|
|
<li class="text-navy font-semibold">{{ title }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<div class="bg-gradient-to-r from-navy to-blue text-white p-6 rounded-2xl mb-6 shadow-lg">
|
|
<h1 class="text-2xl font-bold flex items-center gap-3">
|
|
<i data-lucide="tag" class="w-6 h-6"></i>
|
|
{{ title }}
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Form Section -->
|
|
<div class="max-w-2xl mx-auto">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Name (English)" %} <span class="text-red-500">*</span></label>
|
|
{{ form.name_en }}
|
|
{% if form.name_en.errors %}
|
|
<p class="text-red-500 text-sm mt-1">{{ form.name_en.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Name (Arabic)" %}</label>
|
|
{{ form.name_ar }}
|
|
{% if form.name_ar.errors %}
|
|
<p class="text-red-500 text-sm mt-1">{{ form.name_ar.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Description" %}</label>
|
|
{{ form.description }}
|
|
{% if form.description.errors %}
|
|
<p class="text-red-500 text-sm mt-1">{{ form.description.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Icon" %}</label>
|
|
{{ form.icon }}
|
|
<p class="text-xs text-slate mt-1">
|
|
{% trans "Bootstrap icon class, e.g., bi-exclamation-triangle" %}
|
|
<br>
|
|
<a href="https://icons.getbootstrap.com/" target="_blank" class="text-blue hover:underline">{% trans "Browse icons" %}</a>
|
|
</p>
|
|
{% if form.icon.errors %}
|
|
<p class="text-red-500 text-sm mt-1">{{ form.icon.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-2">{% trans "Sort Order" %}</label>
|
|
{{ form.sort_order }}
|
|
<p class="text-xs text-slate mt-1">{% trans "Lower numbers appear first" %}</p>
|
|
{% if form.sort_order.errors %}
|
|
<p class="text-red-500 text-sm mt-1">{{ form.sort_order.errors.0 }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
{{ form.is_active }}
|
|
<span class="text-sm font-medium text-navy">{% trans "Active" %}</span>
|
|
</label>
|
|
<p class="text-xs text-slate mt-1">{% trans "Inactive categories won't appear in the public form" %}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center pt-4 border-t border-slate-100">
|
|
<a href="{% url 'observations:category_list' %}" class="px-4 py-2.5 border-2 border-slate-200 text-slate rounded-xl text-sm font-semibold hover:bg-slate-50 transition inline-flex items-center gap-2">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-blue transition inline-flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4"></i>
|
|
{% trans "Save Category" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|