{% extends "base.html" %}

{% block title %}Импорт роли - DevOpsLab{% endblock %}
{% block page_title %}Импорт роли{% endblock %}

{% block header_actions %}
<a href="/roles" class="btn btn-secondary btn-sm">
    <i class="fas fa-arrow-left me-2"></i>
    Назад к списку
</a>
{% endblock %}

{% block content %}
<div class="card mb-3">
    <div class="card-header">
        <h5 class="mb-0">Импорт из Git репозитория</h5>
    </div>
    <div class="card-body">
        <form 
            hx-post="/api/v1/roles/import/git"
            hx-target="#import-result"
            hx-swap="innerHTML"
        >
            <div class="mb-3">
                <label class="form-label">URL Git репозитория *</label>
                <input 
                    type="url" 
                    name="repo_url"
                    class="form-control"
                    placeholder="https://github.com/username/ansible-role-nginx.git"
                    required
                >
                <div class="form-text">
                    Поддерживаются HTTPS и SSH URL
                </div>
            </div>
            
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label">Имя роли (опционально)</label>
                    <input 
                        type="text" 
                        name="role_name"
                        class="form-control"
                        placeholder="Автоматически из URL"
                        pattern="[a-z0-9_-]+"
                    >
                    <div class="form-text">
                        Если не указано, будет извлечено из имени репозитория
                    </div>
                </div>
                
                <div class="col-12 col-md-6">
                    <label class="form-label">Ветка</label>
                    <input 
                        type="text" 
                        name="branch"
                        value="main"
                        class="form-control"
                        placeholder="main"
                    >
                </div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Поддиректория (опционально)</label>
                <input 
                    type="text" 
                    name="subdirectory"
                    class="form-control"
                    placeholder="roles/nginx"
                >
                <div class="form-text">
                    Если роль находится не в корне репозитория
                </div>
            </div>
            
            <div id="import-result" class="mt-3"></div>
            
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-download me-2"></i>
                    Импортировать из Git
                </button>
                <button 
                    type="button" 
                    class="btn btn-outline-secondary"
                    onclick="validateRepo()"
                >
                    <i class="fas fa-check me-2"></i>
                    Проверить репозиторий
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <h5 class="mb-0">Импорт из Ansible Galaxy</h5>
    </div>
    <div class="card-body">
        <form 
            hx-post="/api/v1/roles/import/galaxy"
            hx-target="#galaxy-result"
            hx-swap="innerHTML"
        >
            <div class="mb-3">
                <label class="form-label">Имя роли *</label>
                <input 
                    type="text" 
                    name="role_name"
                    class="form-control"
                    placeholder="username.role_name или role_name"
                    required
                >
                <div class="form-text">
                    Формат: namespace.role_name или просто role_name
                </div>
            </div>
            
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label">Namespace (опционально)</label>
                    <input 
                        type="text" 
                        name="namespace"
                        class="form-control"
                        placeholder="username"
                    >
                </div>
                
                <div class="col-12 col-md-6">
                    <label class="form-label">Версия (опционально)</label>
                    <input 
                        type="text" 
                        name="version"
                        class="form-control"
                        placeholder="1.0.0"
                    >
                </div>
            </div>
            
            <div id="galaxy-result" class="mt-3"></div>
            
            <button type="submit" class="btn btn-success">
                <i class="fas fa-cloud-download-alt me-2"></i>
                Импортировать из Galaxy
            </button>
        </form>
    </div>
</div>

<script>
async function validateRepo() {
    const repoUrl = document.querySelector('input[name="repo_url"]').value;
    const branch = document.querySelector('input[name="branch"]').value || 'main';
    
    if (!repoUrl) {
        alert('Введите URL репозитория');
        return;
    }
    
    const formData = new FormData();
    formData.append('repo_url', repoUrl);
    formData.append('branch', branch);
    
    try {
        const response = await fetch('/api/v1/roles/import/validate', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.valid) {
            alert(`✅ Репозиторий доступен!\n\nСтруктура роли:\n- tasks: ${result.has_tasks ? '✅' : '❌'}\n- meta: ${result.has_meta ? '✅' : '❌'}`);
        } else {
            alert(`❌ Ошибка: ${result.error}`);
        }
    } catch (error) {
        alert(`❌ Ошибка проверки: ${error.message}`);
    }
}
</script>
{% endblock %}