{% extends "base.html" %}

{% block title %}LoRA Recipes{% endblock %}
{% block page_id %}recipes{% endblock %}

{% block page_css %}
<link rel="stylesheet" href="/loras_static/css/components/recipe-card.css">
<link rel="stylesheet" href="/loras_static/css/components/recipe-modal.css">
<link rel="stylesheet" href="/loras_static/css/components/import-modal.css">
{% endblock %}

{% block preload %}
<link rel="preload" href="/loras_static/js/recipes.js" as="script" crossorigin="anonymous">
{% endblock %}

{% block additional_components %}
{% include 'components/import_modal.html' %}
{% include 'components/recipe_modal.html' %}
{% endblock %}

{% block init_title %}Initializing Recipe Manager{% endblock %}
{% block init_message %}Scanning and building recipe cache. This may take a few moments...{% endblock %}
{% block init_check_url %}/api/recipes?page=1&page_size=1{% endblock %}

{% block content %}
    <!-- Recipe controls -->
    <div class="controls">
        <div class="action-buttons">
            <div title="Import recipes" class="control-group">
                <button onclick="importRecipes()"><i class="fas fa-file-import"></i> Import</button>
            </div>
        </div>
    </div>
    
    <!-- Recipe grid -->
    <div class="card-grid recipe-grid" id="recipeGrid">
        {% if recipes and recipes|length > 0 %}
            {% for recipe in recipes %}
                <div class="recipe-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
                    <div class="recipe-indicator" title="Recipe">R</div>
                    <div class="card-preview">
                        <img src="{{ recipe.file_url }}" alt="{{ recipe.title }}">
                        <div class="card-header">
                            <div class="base-model-wrapper">
                                {% if recipe.base_model %}
                                <span class="base-model-label" title="{{ recipe.base_model }}">
                                    {{ recipe.base_model }}
                                </span>
                                {% endif %}
                            </div>
                            <div class="card-actions">
                                <i class="fas fa-share-alt" title="Share Recipe"></i>
                                <i class="fas fa-copy" title="Copy Recipe"></i>
                                <i class="fas fa-trash" title="Delete Recipe"></i>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="model-info">
                                <span class="model-name">{{ recipe.title }}</span>
                            </div>
                            <div class="lora-count" title="Number of LoRAs in this recipe">
                                <i class="fas fa-layer-group"></i> {{ recipe.loras|length }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="placeholder-message">
                <p>No recipes found</p>
                <p>Add recipe images to your recipes folder to see them here.</p>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block main_script %}
<script type="module" src="/loras_static/js/recipes.js"></script>
{% endblock %}

{% block additional_scripts %}
<script>
    // Refresh recipes
    function refreshRecipes() {
        // Will be implemented in recipes.js
        window.location.reload();
    }
    
    // Import recipes
    function importRecipes() {
        // Show import modal
        const importModal = document.getElementById('importModal');
        if (importModal) {
            importModal.classList.remove('hidden');
            importModal.style.display = 'block';
        }
    }
</script>
{% endblock %}