{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="grid">
  <section class="card">
    <header class="flex-between" style="margin-bottom: var(--spacing); gap:12px; align-items:center;">
      <div>
        <h2>{% trans "Businesses" %}</h2>
        <p class="muted">{% trans "Switch between your companies or create a new one." %}</p>
      </div>
      <div style="display:flex; gap:8px; align-items:center;">
        {% if current_business %}
          <a href="{% url 'company' %}" class="btn btn--secondary">{% trans "Edit current" %}</a>
        {% endif %}
        <button type="button" class="btn btn--primary" data-modal-open="business-modal">{% trans "Create business" %}</button>
      </div>
    </header>

    <div style="display:flex; flex-direction:column; gap:var(--spacing);">
      <div>
        <h3 class="muted" style="margin-bottom:8px;">{% trans "Your businesses" %}</h3>
        {% if businesses %}
          <div style="display:flex; flex-direction:column; gap:12px;">
            {% for biz in businesses %}
              <div style="border:1px solid #2a2a2a; border-radius:12px; padding:12px; display:flex; justify-content:space-between; gap:12px; align-items:center;">
                <div>
                  <div class="org-name" style="font-weight:600;">{{ biz.name }}</div>
                  <div class="muted" style="font-size:0.9rem;">
                    {% if biz.city %}{{ biz.city }}{% if biz.country %}, {% endif %}{% endif %}
                    {% if biz.country %}{{ biz.country.name }}{% endif %}
                  </div>
                  <div class="muted" style="font-size:0.85rem;">
                    {% trans "Currency" %}: {{ biz.currency }}{% if biz.language %} | {% trans "Language" %}: {{ biz.language }}{% endif %}
                  </div>
                </div>
                <div style="display:flex; gap:8px; align-items:center;">
                  {% if current_business and biz.id == current_business.id %}
                    <span class="btn btn--sm btn--primary" style="pointer-events:none;">{% trans "Active" %}</span>
                  {% else %}
                    <form method="post" action="{% url 'switch_business' biz.id %}">
                      {% csrf_token %}
                      <input type="hidden" name="next" value="{% url 'business_list' %}">
                      <button type="submit" class="btn btn--sm btn--secondary">{% trans "Switch" %}</button>
                    </form>
                  {% endif %}
                </div>
              </div>
            {% endfor %}
          </div>
        {% else %}
          <p class="muted">{% trans "No businesses yet. Use the button above to create your first company." %}</p>
        {% endif %}
      </div>
    </div>
  </section>
</div>

<div id="business-modal" class="modal{% if form.errors %} open{% endif %}">
  <div class="modal-content">
    <div class="flex-between" style="align-items:center; margin-bottom:12px;">
      <h3 style="margin:0;">{% trans "Create a new business" %}</h3>
      <button type="button" class="btn btn--tertiary" data-modal-close="business-modal" aria-label="{% trans 'Close' %}">&times;</button>
    </div>
    <form method="post" enctype="multipart/form-data" style="display:flex; flex-direction:column; gap:12px;">
      {% csrf_token %}
      {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
          <p class="alert alert-error">{{ error }}</p>
        {% endfor %}
      {% endif %}
      <div class="grid cols-2" style="gap:12px;">
        <div>
          <label for="{{ form.name.id_for_label }}">{% trans "Name" %}</label>
          <input type="text" id="{{ form.name.id_for_label }}" name="{{ form.name.html_name }}" value="{{ form.name.value|default_if_none:'' }}" placeholder="{% trans 'Business name' %}" class="input" required>
          {% for error in form.name.errors %}<p class="alert alert-error">{{ error }}</p>{% endfor %}
        </div>
        <div>
          <label for="{{ form.city.id_for_label }}">{% trans "City" %}</label>
          <input type="text" id="{{ form.city.id_for_label }}" name="{{ form.city.html_name }}" value="{{ form.city.value|default_if_none:'' }}" placeholder="{% trans 'City' %}" class="input">
          {% for error in form.city.errors %}<p class="alert alert-error">{{ error }}</p>{% endfor %}
        </div>
        <div>
          <label for="{{ form.country.id_for_label }}">{% trans "Country" %}</label>
          {{ form.country }}
          {% for error in form.country.errors %}<p class="alert alert-error">{{ error }}</p>{% endfor %}
        </div>
        <div>
          <label for="{{ form.currency.id_for_label }}">{% trans "Currency" %}</label>
          {{ form.currency }}
          {% for error in form.currency.errors %}<p class="alert alert-error">{{ error }}</p>{% endfor %}
        </div>
        <div>
          <label for="{{ form.language.id_for_label }}">{% trans "Language" %}</label>
          {{ form.language }}
          {% for error in form.language.errors %}<p class="alert alert-error">{{ error }}</p>{% endfor %}
        </div>
        <div>
          <label for="{{ form.industry.id_for_label }}">{% trans "Industry" %}</label>
          <input type="text" id="{{ form.industry.id_for_label }}" name="{{ form.industry.html_name }}" value="{{ form.industry.value|default_if_none:'' }}" placeholder="{% trans 'Industry' %}" class="input">
          {% for error in form.industry.errors %}<p class="alert alert-error">{{ error }}</p>{% endfor %}
        </div>
      </div>
      <div>
        <label for="{{ form.logo.id_for_label }}">{% trans "Logo" %}</label>
        <input type="file" id="{{ form.logo.id_for_label }}" name="{{ form.logo.html_name }}" accept="image/*">
        {% for error in form.logo.errors %}<p class="alert alert-error">{{ error }}</p>{% endfor %}
      </div>
      <div class="form-actions" style="margin-top:12px; display:flex; gap:8px; justify-content:flex-end;">
        <button type="button" class="btn btn--secondary" data-modal-close="business-modal">{% trans "Cancel" %}</button>
        <button type="submit" class="btn btn--primary">{% trans "Create business" %}</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}