{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6">
<div class="pcard">
    <form method="POST" novalidate>
        {{ form.hidden_tag() }}

        <div class="mb-3">
            {{ form.asset_name.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.asset_name(class="form-control" + (" is-invalid" if form.asset_name.errors else ""),
                               placeholder="e.g. Apple Inc., Bitcoin, Vanguard S&P 500") }}
            {% for e in form.asset_name.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
        </div>

        <div class="row g-3 mb-3">
            <div class="col-6">
                {{ form.asset_type.label(class="form-label fw-medium", style="font-size:13px;") }}
                {{ form.asset_type(class="form-select") }}
            </div>
            <div class="col-6">
                {{ form.ticker.label(class="form-label fw-medium", style="font-size:13px;") }}
                <div class="input-group">
                    {{ form.ticker(class="form-control", placeholder="AAPL", id="tickerInput", style="text-transform:uppercase;") }}
                    <button type="button" class="btn btn-outline-secondary" id="checkTicker" style="font-size:12px;">Check</button>
                </div>
                <div id="tickerResult" style="font-size:12px;margin-top:4px;"></div>
                <small class="text-muted" style="font-size:11px;">Yahoo Finance format. e.g. AAPL, BTC-USD, ETH-USD</small>
            </div>
        </div>

        <div class="mb-4">
            {{ form.notes.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.notes(class="form-control", rows=2, placeholder="Optional notes") }}
        </div>

        <div class="d-flex gap-2">
            {{ form.submit(class="btn btn-primary") }}
            <a href="{{ url_for('investments.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>
</div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('checkTicker').addEventListener('click', function() {
    const ticker = document.getElementById('tickerInput').value.trim().toUpperCase();
    const result = document.getElementById('tickerResult');
    if (!ticker) { result.textContent = ''; return; }
    result.innerHTML = '<span class="text-muted">Fetching…</span>';
    fetch('/investments/api/price/' + encodeURIComponent(ticker))
        .then(r => r.json())
        .then(data => {
            if (data.price) {
                result.innerHTML = '<span class="text-success"><i class="bi bi-check-circle me-1"></i>' + ticker + ' → {{ current_user.currency_symbol }}' + data.price.toFixed(4) + '</span>';
            } else {
                result.innerHTML = '<span class="text-danger"><i class="bi bi-x-circle me-1"></i>Ticker not found or no data</span>';
            }
        })
        .catch(() => { result.innerHTML = '<span class="text-warning">Could not fetch price</span>'; });
});
</script>
{% endblock %}