{% extends "base.html" %}
{% from "macros.html" import render_breadcrumb, render_empty_state, render_pagination %}

{% block title %}Templates - Document Generator{% endblock %}

{% block breadcrumb %}
{{ render_breadcrumb([
    {'title': 'Dashboard', 'url': url_for('main.dashboard')},
    {'title': 'Templates'}
]) }}
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1 class="h2 mb-0">Document Templates</h1>
        <p class="text-muted">Manage your document templates</p>
    </div>
    <div class="col-auto">
        <a href="{{ url_for('templates.new') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>New Template
        </a>
    </div>
</div>

{% if templates.items %}
<div class="row">
    {% for template in templates.items %}
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h5 class="card-title mb-0">{{ template.title }}</h5>
                    <span class="badge bg-secondary">v{{ template.version }}</span>
                </div>
                
                {% if template.description %}
                <p class="card-text text-muted">{{ template.description[:100] }}{% if template.description|length > 100 %}...{% endif %}</p>
                {% else %}
                <p class="card-text text-muted">No description provided</p>
                {% endif %}
                
                <div class="row text-center mt-3">
                    <div class="col-6">
                        <small class="text-muted">Created</small>
                        <div class="fw-bold">{{ template.created_at.strftime('%m/%d/%Y') }}</div>
                    </div>
                    <div class="col-6">
                        <small class="text-muted">Jobs</small>
                        <div class="fw-bold">{{ template.jobs.count() }}</div>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-transparent">
                <div class="d-flex gap-2">
                    <a href="{{ url_for('templates.view', id=template.id) }}" 
                       class="btn btn-outline-primary btn-sm flex-fill">
                        <i class="bi bi-eye me-1"></i>View
                    </a>
                    <a href="{{ url_for('docgen.index') }}?template_id={{ template.id }}" 
                       class="btn btn-success btn-sm flex-fill">
                        <i class="bi bi-play me-1"></i>Generate
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{{ render_pagination(templates, 'templates.index') }}

{% else %}
{{ render_empty_state(
    title="No Templates Yet",
    description="Upload your first document template to get started with automated document generation.",
    icon="bi-file-earmark-text",
    action_text="Upload Template",
    action_url=url_for('templates.new')
) }}
{% endif %}
{% endblock %}