{% extends "admin/base_admin.html" %}
{% set admin_page = "scenarios" %}

{% block title %}{% if editing %}Edit{% else %}New{% endif %} Scenario - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <div style="max-width: 48rem; margin: 0 auto;">
    <a href="{{ url_for('admin.scenarios') }}" class="text-sm text-slate">&larr; Back to scenarios</a>
    <h1 class="text-2xl mt-4 mb-6">{% if editing %}Edit{% else %}New{% endif %} Published Scenario</h1>

    <form method="post" class="card">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <!-- Metadata -->
      <h3 class="text-base font-semibold mb-3">Metadata</h3>
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;" class="mb-6">
        <div>
          <label class="form-label">Title</label>
          <input type="text" name="title" value="{{ data.get('title', '') }}" class="form-input" required>
        </div>
        <div>
          <label class="form-label">Slug</label>
          <input type="text" name="slug" value="{{ data.get('slug', '') }}" class="form-input"
                 placeholder="auto-generated" {% if editing %}readonly{% endif %}>
        </div>
        <div>
          <label class="form-label">Subtitle</label>
          <input type="text" name="subtitle" value="{{ data.get('subtitle', '') }}" class="form-input">
        </div>
        <div>
          <label class="form-label">Location</label>
          <input type="text" name="location" value="{{ data.get('location', '') }}" class="form-input" required placeholder="e.g. Miami">
        </div>
        <div>
          <label class="form-label">Country</label>
          <input type="text" name="country" value="{{ data.get('country', '') }}" class="form-input" required placeholder="e.g. US">
        </div>
      </div>

      <!-- Venue -->
      <h3 class="text-base font-semibold mb-3">Venue</h3>
      <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem;" class="mb-6">
        <div>
          <label class="form-label">Venue Type</label>
          <select name="venue" class="form-input">
            <option value="indoor" {% if data.get('venue') == 'indoor' %}selected{% endif %}>Indoor</option>
            <option value="outdoor" {% if data.get('venue') == 'outdoor' %}selected{% endif %}>Outdoor</option>
          </select>
        </div>
        <div>
          <label class="form-label">Ownership</label>
          <select name="own" class="form-input">
            <option value="rent" {% if data.get('own') == 'rent' %}selected{% endif %}>Rent</option>
            <option value="buy" {% if data.get('own') == 'buy' %}selected{% endif %}>Buy</option>
          </select>
        </div>
        <div>
          <label class="form-label">Double Courts</label>
          <input type="number" name="dblCourts" value="{{ data.get('dblCourts', defaults.dblCourts) }}" class="form-input" min="0">
        </div>
        <div>
          <label class="form-label">Single Courts</label>
          <input type="number" name="sglCourts" value="{{ data.get('sglCourts', defaults.sglCourts) }}" class="form-input" min="0">
        </div>
      </div>

      <!-- Pricing -->
      <h3 class="text-base font-semibold mb-3">Pricing</h3>
      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;" class="mb-6">
        <div>
          <label class="form-label">Peak Rate (&euro;/hr)</label>
          <input type="number" name="ratePeak" value="{{ data.get('ratePeak', defaults.ratePeak) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Off-Peak Rate (&euro;/hr)</label>
          <input type="number" name="rateOffPeak" value="{{ data.get('rateOffPeak', defaults.rateOffPeak) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Single Rate (&euro;/hr)</label>
          <input type="number" name="rateSingle" value="{{ data.get('rateSingle', defaults.rateSingle) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Peak %</label>
          <input type="number" name="peakPct" value="{{ data.get('peakPct', defaults.peakPct) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Hours/Day</label>
          <input type="number" name="hoursPerDay" value="{{ data.get('hoursPerDay', defaults.hoursPerDay) }}" class="form-input">
        </div>
        <div>
          <label class="form-label">Utilization Target (%)</label>
          <input type="number" name="utilTarget" value="{{ data.get('utilTarget', defaults.utilTarget) }}" class="form-input" step="any">
        </div>
      </div>

      <!-- OPEX -->
      <h3 class="text-base font-semibold mb-3">Operating Costs (monthly)</h3>
      <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;" class="mb-6">
        <div>
          <label class="form-label">Rent/m&sup2;</label>
          <input type="number" name="rentSqm" value="{{ data.get('rentSqm', defaults.rentSqm) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Electricity</label>
          <input type="number" name="electricity" value="{{ data.get('electricity', defaults.electricity) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Heating</label>
          <input type="number" name="heating" value="{{ data.get('heating', defaults.heating) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Staff</label>
          <input type="number" name="staff" value="{{ data.get('staff', defaults.staff) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Insurance</label>
          <input type="number" name="insurance" value="{{ data.get('insurance', defaults.insurance) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Maintenance</label>
          <input type="number" name="maintenance" value="{{ data.get('maintenance', defaults.maintenance) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Cleaning</label>
          <input type="number" name="cleaning" value="{{ data.get('cleaning', defaults.cleaning) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Marketing</label>
          <input type="number" name="marketing" value="{{ data.get('marketing', defaults.marketing) }}" class="form-input" step="any">
        </div>
      </div>

      <!-- CAPEX -->
      <h3 class="text-base font-semibold mb-3">Capital Costs</h3>
      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;" class="mb-6">
        <div>
          <label class="form-label">Court Cost (dbl)</label>
          <input type="number" name="courtCostDbl" value="{{ data.get('courtCostDbl', defaults.courtCostDbl) }}" class="form-input">
        </div>
        <div>
          <label class="form-label">Court Cost (sgl)</label>
          <input type="number" name="courtCostSgl" value="{{ data.get('courtCostSgl', defaults.courtCostSgl) }}" class="form-input">
        </div>
        <div>
          <label class="form-label">Hall Cost/m&sup2;</label>
          <input type="number" name="hallCostSqm" value="{{ data.get('hallCostSqm', defaults.hallCostSqm) }}" class="form-input">
        </div>
        <div>
          <label class="form-label">Land Price/m&sup2;</label>
          <input type="number" name="landPriceSqm" value="{{ data.get('landPriceSqm', defaults.landPriceSqm) }}" class="form-input">
        </div>
        <div>
          <label class="form-label">Contingency (%)</label>
          <input type="number" name="contingencyPct" value="{{ data.get('contingencyPct', defaults.contingencyPct) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Fit-out</label>
          <input type="number" name="fitout" value="{{ data.get('fitout', defaults.fitout) }}" class="form-input">
        </div>
      </div>

      <!-- Financing -->
      <h3 class="text-base font-semibold mb-3">Financing</h3>
      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;" class="mb-6">
        <div>
          <label class="form-label">Loan %</label>
          <input type="number" name="loanPct" value="{{ data.get('loanPct', defaults.loanPct) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Interest Rate (%)</label>
          <input type="number" name="interestRate" value="{{ data.get('interestRate', defaults.interestRate) }}" class="form-input" step="any">
        </div>
        <div>
          <label class="form-label">Loan Term (years)</label>
          <input type="number" name="loanTerm" value="{{ data.get('loanTerm', defaults.loanTerm) }}" class="form-input">
        </div>
      </div>

      <button type="submit" class="btn" style="width: 100%;">{% if editing %}Update &amp; Recalculate{% else %}Create Scenario{% endif %}</button>
    </form>
  </div>
{% endblock %}
