{% extends "base.html" %}

{% block title %}Find Invoice - Invoice Generation Service{% endblock %}

{% block content %}
<div class="card">
    <h2>Find Invoice</h2>
    <p>Enter the invoice number to search for an existing invoice.</p>
    
    {% if error %}
    <div class="alert alert-error">
        {{ error }}
    </div>
    {% endif %}
    
    <form method="POST" action="{{ url_for('search_invoice') }}" class="search-form-container">
        <div class="search-form">
            <input type="text" id="invoice_number" name="invoice_number" placeholder="Enter invoice number..." value="{{ invoice_number or '' }}" required>
            <button type="submit" class="btn">Search</button>
        </div>
        <p class="help-text">Example format: INV-YYYYMM-XXXXXX</p>
    </form>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .search-form-container {
        max-width: 600px;
        margin: 2rem auto;
    }
    
    .search-form {
        display: flex;
        margin-bottom: 0.5rem;
    }
    
    .help-text {
        font-size: 0.9rem;
        color: #7f8c8d;
        margin-top: 0.5rem;
    }
</style>
{% endblock %}