<?php include 'views/header.php'; ?>

<div class="container-div">
    <h2>Crear Blog</h2>
    <p>Completa el formulario para crear un nuevo blog.</p>

    <form id="blogForm" class="mt-4">
        <input type="hidden" id="imagen_principal" name="imagen_principal" value="">
        <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="nombre" class="form-label">Título</label>
                            <input type="text" class="form-control" id="nombre" name="nombre" required>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="publicado" class="form-label">Estado</label>
                            <select class="form-select" id="publicado" name="publicado">
                                <option value="1">Activo</option>
                                <option value="0">Inactivo</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="descripcion" class="form-label">Contenido</label>
                    <textarea class="form-control" id="descripcion" name="descripcion"></textarea>
                </div>
            </div>

            <div class="col-md-4">
                <div class="d-flex justify-content-end mb-4">
                    <a href="blog.php" class="btn btn-secondary" style="margin-right: 10px;">Cancelar</a>
                    <button type="submit" class="btn btn-primary">Guardar Blog</button>
                </div>

                <div class="mb-4">
                    <label class="form-label">Imagen del blog</label>
                    <div id="dropzoneBlog" class="dropzone">
                        <div class="dz-message needsclick">
                            Arrastra la imagen aquí o haz clic para seleccionar<br>
                            <small class="text-muted">Solo se permite una imagen</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="js/crearBlog.js"></script>
<?php include 'views/footer.php'; ?>