Mejor alineación de formulario de creación de evento.

src/templates/eventos/crear_evento.html

@@ -5,17 +5,107 @@
 {% endblock menuapp %}
 
 {% block content %}
-<div class="column is-4 is-offset-4">
-
-    <h3>{% if evento %}Editar evento{% else %}Nuevo evento{% endif %}</h3>
-    <div class="box">
-        <form method="POST" enctype="multipart/form-data">
-            {% csrf_token %}
-            {{ form.as_p }}
-            <div class="text mb-3">
-                <button type="submit" class="btn app-btn-primary w-100 theme-btn mx-auto">{% if evento %}Actualizar{% else %}Crear{% endif %} Evento</button>
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <h3>{% if evento %}Editar evento{% else %}Nuevo evento{% endif %}</h3>
+            <div class="card">
+                <div class="card-body">
+                    <form method="POST" enctype="multipart/form-data">
+                        {% csrf_token %}
+                        
+                        <div class="mb-3">
+                            <label for="{{ form.nombre.id_for_label }}" class="form-label">{{ form.nombre.label }}</label>
+                            {{ form.nombre }}
+                            {% if form.nombre.errors %}
+                                <div class="text-danger">{{ form.nombre.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="{{ form.descripcion.id_for_label }}" class="form-label">{{ form.descripcion.label }}</label>
+                            {{ form.descripcion }}
+                            {% if form.descripcion.errors %}
+                                <div class="text-danger">{{ form.descripcion.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="mb-3">
+                                    <label for="{{ form.fecha.id_for_label }}" class="form-label">{{ form.fecha.label }}</label>
+                                    {{ form.fecha }}
+                                    {% if form.fecha.errors %}
+                                        <div class="text-danger">{{ form.fecha.errors }}</div>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="mb-3">
+                                    <label for="{{ form.hora.id_for_label }}" class="form-label">{{ form.hora.label }}</label>
+                                    {{ form.hora }}
+                                    {% if form.hora.errors %}
+                                        <div class="text-danger">{{ form.hora.errors }}</div>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="{{ form.plazas_disponibles.id_for_label }}" class="form-label">{{ form.plazas_disponibles.label }}</label>
+                            {{ form.plazas_disponibles }}
+                            {% if form.plazas_disponibles.errors %}
+                                <div class="text-danger">{{ form.plazas_disponibles.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="{{ form.precio.id_for_label }}" class="form-label">{{ form.precio.label }}</label>
+                            {{ form.precio }}
+                            {% if form.precio.errors %}
+                                <div class="text-danger">{{ form.precio.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="{{ form.lugar.id_for_label }}" class="form-label">{{ form.lugar.label }}</label>
+                            {{ form.lugar }}
+                            {% if form.lugar.errors %}
+                                <div class="text-danger">{{ form.lugar.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="{{ form.url_imagen.id_for_label }}" class="form-label">{{ form.url_imagen.label }}</label>
+                            {{ form.url_imagen }}
+                            {% if form.url_imagen.errors %}
+                                <div class="text-danger">{{ form.url_imagen.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3 form-check">
+                            {{ form.publicado }}
+                            <label for="{{ form.publicado.id_for_label }}" class="form-check-label">{{ form.publicado.label }}</label>
+                            {% if form.publicado.errors %}
+                                <div class="text-danger">{{ form.publicado.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3 form-check">
+                            {{ form.para_parejas }}
+                            <label for="{{ form.para_parejas.id_for_label }}" class="form-check-label">{{ form.para_parejas.label }}</label>
+                            {% if form.para_parejas.errors %}
+                                <div class="text-danger">{{ form.para_parejas.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="text-center">
+                            <button type="submit" class="btn btn-primary btn-lg">{% if evento %}Actualizar{% else %}Crear{% endif %} Evento</button>
+                        </div>
+                    </form>
+                </div>
             </div>
-        </form>
+        </div>
     </div>
 </div>
 {% endblock %}