{% extends "base.html" %}

{% block title %}Thermal Printer App - Home{% endblock %}

{% block content %}
<div class="text-center mb-5">
    <h1 class="display-4 fw-bold mb-3">
        <i class="bi bi-printer text-primary"></i> Thermal Printer Application
    </h1>
    <p class="lead text-secondary">Select a template to print or create custom content</p>
</div>

{% if recent_templates %}
<div class="recent-templates mb-4">
    <h3 class="h5 mb-3">
        <i class="bi bi-clock-history text-primary"></i> Recent Templates
    </h3>
    <div class="row g-2">
        {% for template_name in recent_templates %}
        {% if template_name in templates %}
        <div class="col-auto">
            <a href="{{ url_for('print_template', template_name=template_name) }}" 
               class="btn btn-outline-primary btn-sm">
                <i class="bi bi-arrow-clockwise"></i> {{ templates[template_name].name }}
            </a>
        </div>
        {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="row g-4 mb-4">
    {% for name, template in templates.items() %}
    <div class="col-md-6 col-lg-4">
        <div class="card template-card h-100" data-href="{{ url_for('print_template', template_name=name) }}">
            <div class="card-body d-flex flex-column">
                <div class="d-flex align-items-start mb-3">
                    <div class="me-3">
                        <i class="bi bi-file-text-fill text-primary fs-2"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h5 class="card-title mb-1">{{ template.name }}</h5>
                        {% if template.description %}
                        <p class="card-text text-secondary small mb-2">{{ template.description }}</p>
                        {% endif %}
                    </div>
                </div>
                
                <div class="mt-auto">
                    {% if template.variables %}
                    <div class="mb-2">
                        <small class="text-secondary">
                            <i class="bi bi-input-cursor"></i> {{ template.variables|length }} variable{{ 's' if template.variables|length != 1 else '' }}
                        </small>
                    </div>
                    {% else %}
                    <div class="mb-2">
                        <small class="text-secondary">
                            <i class="bi bi-check-circle"></i> Ready to print
                        </small>
                    </div>
                    {% endif %}
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ url_for('print_template', template_name=name) }}" 
                           class="btn btn-primary btn-sm">
                            <i class="bi bi-printer"></i> Use Template
                        </a>
                        {% if name in recent_templates %}
                        <small class="text-primary">
                            <i class="bi bi-star-fill"></i>
                        </small>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<div class="text-center">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">
                <i class="bi bi-gear text-primary"></i> Configuration
            </h5>
            <p class="card-text text-secondary">Manage printer settings and application preferences</p>
            <a href="{{ url_for('settings') }}" class="btn btn-secondary">
                <i class="bi bi-gear"></i> Open Settings
            </a>
        </div>
    </div>
</div>

{% if not templates %}
<div class="text-center py-5">
    <div class="mb-4">
        <i class="bi bi-inbox text-secondary" style="font-size: 4rem;"></i>
    </div>
    <h3 class="text-secondary">No Templates Available</h3>
    <p class="text-secondary">No templates have been configured yet. Check your template directory or create new templates.</p>
</div>
{% endif %}
{% endblock %}