crear-contenidos.component.html

<div class="tarjeta">
    <div class="container">
        <div class="left" (click)="fileInput.click()">
            <input
                type="file"
                #fileInput
                (change)="fileChanged($event)"
                hidden />
            <div
                *ngIf="!filePreview && !isOther"
                class="file-upload-placeholder">
                Clic para añadir archivo
            </div>
            <ng-template [ngIf]="isImage">
                <div class="image-container">
                    <div class="image-overlay"></div>
                    <img [src]="filePreview" alt="Vista previa de la imagen" />
                </div>
            </ng-template>
            <ng-template [ngIf]="isVideo">
                <div class="video-preview">
                    <video [src]="filePreview" controls width="100%"></video>
                </div>
            </ng-template>
            <ng-template [ngIf]="isOther">
                <div class="other-preview">
                    <p>Archivo cargado</p>
                </div>
            </ng-template>
            <div class="file-name" *ngIf="fileName">
                <p>{{ fileName }}</p>
            </div>
        </div>
        <div class="right">
            <div>
                <label for="nombre_archivo">Nombre del archivo:</label>
                <input
                    type="text"
                    id="nombre_archivo"
                    name="nombre_archivo"
                    [(ngModel)]="nombreArchivo"
                    (ngModelChange)="validateNombreArchivo()" />
                <div class="error" *ngIf="nombreArchivoError">
                    {{ nombreArchivoError }}
                </div>
            </div>
            <label for="descripcion">Descripción:</label>
            <textarea
                id="descripcion"
                name="descripcion"
                rows="4"
                [(ngModel)]="descripcion"
                (ngModelChange)="validateDescripcion()"></textarea>
            <div class="error" *ngIf="descripcionError">
                {{ descripcionError }}
            </div>
            <div>
                <br />
                <label for="nombre_version">Nombre de la versión:</label>
                <input
                    type="text"
                    id="nombre_version"
                    name="nombre_version"
                    [(ngModel)]="nombreVersion"
                    (ngModelChange)="validateNombreVersion()" />
                <div class="error" *ngIf="nombreVersionError">
                    {{ nombreVersionError }}
                </div>
            </div>
            <div class="tags">
                <label for="etiquetas">Etiquetas:</label>
                <div class="tag-input-container">
                    <input
                        type="text"
                        [(ngModel)]="tagInput"
                        placeholder="Agregar etiqueta" />
                    <button (click)="agregarTag()">Añadir</button>
                </div>
                <div class="error" *ngIf="etiquetasError">
                    {{ etiquetasError }}
                </div>
                <div class="tags-list">
                    <div
                        class="tag"
                        *ngFor="let etiqueta of etiquetas"
                        (click)="eliminarTag(etiqueta)">
                        {{ etiqueta.nombre }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-section">
        <button (click)="validarDatos()">
            {{ isEditing ? 'Editar archivo' : 'Guardar archivo' }}
        </button>
    </div>
</div>