{% extends "base.html" %}

{% block title %}Создать Dockerfile - DevOpsLab{% endblock %}
{% block page_title %}Создать Dockerfile{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <form
            hx-post="/api/v1/dockerfiles"
            hx-swap="none"
            id="dockerfile-form"
        >
            <div class="mb-3">
                <label class="form-label">Название</label>
                <input
                    type="text"
                    name="name"
                    class="form-control"
                    placeholder="ubuntu22"
                    required
                    pattern="[a-z0-9-]+"
                    title="Только строчные буквы, цифры и дефисы"
                >
                <div class="form-text">
                    Только строчные буквы, цифры и дефисы
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Базовый образ</label>
                <input
                    type="text"
                    name="base_image"
                    class="form-control"
                    placeholder="ubuntu:22.04"
                >
                <div class="form-text">
                    Базовый образ (например, ubuntu:22.04)
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Теги</label>
                <input
                    type="text"
                    name="tags"
                    class="form-control"
                    placeholder="latest, v1.0, stable"
                >
                <div class="form-text">
                    Теги образа через запятую (например: latest, v1.0, stable)
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Описание</label>
                <textarea
                    name="description"
                    class="form-control"
                    rows="3"
                    placeholder="Описание Dockerfile..."
                ></textarea>
            </div>

            <div class="mb-3">
                <label class="form-label">Dockerfile</label>
                <textarea
                    id="dockerfile-content-editor"
                    class="form-control font-monospace"
                    rows="35"
                    placeholder="# Dockerfile
FROM ubuntu:22.04

# Установка пакетов
RUN apt-get update && apt-get install -y ..."
                ></textarea>
                <input type="hidden" name="content" id="dockerfile-content-hidden">
                <div class="form-text">
                    <i class="fas fa-info-circle me-1"></i>
                    Содержимое Dockerfile. Подсветка синтаксиса включена.
                </div>
            </div>


            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-2"></i>
                    Создать Dockerfile
                </button>
                <a href="/dockerfiles" class="btn btn-secondary">
                    <i class="fas fa-times me-2"></i>
                    Отмена
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Инициализация редактора Dockerfile
    if (typeof CodeEditor !== 'undefined') {
        const dockerfileEditor = CodeEditor.init('dockerfile-content-editor', 'dockerfile', {
            theme: 'monokai',
            lineNumbers: true,
            foldGutter: true
        });
        
        if (dockerfileEditor) {
            dockerfileEditor.on('change', function() {
                const content = dockerfileEditor.getValue();
                // Сохраняем в hidden поле для отправки формы
                document.getElementById('dockerfile-content-hidden').value = content;
            });
        }
    }
    
    // Обработка формы
    const form = document.getElementById('dockerfile-form');
    
    form.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.xhr.status === 200) {
            const response = JSON.parse(event.detail.xhr.responseText);
            // Показываем модальное окно с успешным сообщением
            if (window.showMessageModal) {
                window.showMessageModal(
                    response.message || 'Dockerfile создан успешно',
                    'success',
                    'Успешно',
                    function() {
                        // После закрытия модального окна перенаправляем на страницу деталей
                        window.location.href = `/dockerfiles/${response.id}`;
                    }
                );
            } else {
                // Если функция недоступна, просто перенаправляем
                window.location.href = `/dockerfiles/${response.id}`;
            }
        } else {
            // Ошибка - показываем в модальном окне
            try {
                const response = JSON.parse(event.detail.xhr.responseText);
                const errorMessage = response.detail || response.message || 'Ошибка при создании Dockerfile';
                if (window.showMessageModal) {
                    window.showMessageModal(errorMessage, 'error');
                } else {
                    alert(errorMessage);
                }
            } catch (e) {
                if (window.showMessageModal) {
                    window.showMessageModal('Ошибка при создании Dockerfile', 'error');
                } else {
                    alert('Ошибка при создании Dockerfile');
                }
            }
        }
    });
});
</script>
{% endblock %}