{% extends "base.html" %}

{% block content %}
<form hx-post="{{ request.scope.get('root_path', '') }}/generate"
      hx-target="#preview"
      hx-swap="innerHTML"
      hx-indicator="#loading"
      hx-encoding="multipart/form-data"
      class="upload-form">

    <div class="form-group">
        <label for="file">Data File (Excel or CSV)</label>
        <input type="file" id="file" name="file" accept=".xlsx,.xls,.csv" required>
    </div>

    <div class="form-group">
        <label for="sheet">Sheet Name <span class="optional">(optional, auto-detected)</span></label>
        <input type="text" id="sheet" name="sheet" placeholder="e.g., Sheet1, Manuf, Global Yields">
    </div>

    <div class="form-group">
        <label for="brief">Chart Brief</label>
        <textarea id="brief" name="brief" rows="6" required
            placeholder="Describe the chart you want. For example:&#10;&#10;Create a line chart showing 10-year government bond yields for the US, UK, Australia, Germany, and Japan. Use the columns Date, US_10Y, UK_10Y, AU_10Y, DE_10Y, JP_10Y. Y-axis should show percentages from -1% to 6%."></textarea>
    </div>

    <div class="form-group inline">
        <div>
            <label for="width">Width (px)</label>
            <input type="number" id="width" name="width" value="2560" min="400" max="5000">
        </div>
        <div>
            <label for="height">Height (px)</label>
            <input type="number" id="height" name="height" value="1440" min="300" max="3000">
        </div>
    </div>

    <button type="submit" class="btn">Generate Chart</button>
</form>

<div id="loading" class="htmx-indicator">
    <div class="spinner"></div>
    <p>Interpreting brief and rendering chart...</p>
</div>

<div id="preview"></div>
{% endblock %}