{% extends "onboarding_base.html" %}
{% load static %}
{% load i18n %}
{% block content %}
<div class="home-page">
  <div class="home-hero">
    <div class="home-hero-inner">
      <h1 class="home-hero-title">Better grazing decisions start with better data.</h1>
      <p class="home-hero-subtitle">Empowering the data-driver transition to regenerative grazing.</p>
      <div class="home-hero-actions">
        <a href="{{ join_url }}">
          <button class="btn-primary" disabled>{% trans 'Join the network' %}</button>
        </a>
        <a href="{{ data_explorer_url }}">
          <button class="btn-white">{% trans 'Explore data' %}</button>
        </a>
      </div>
      <p class="home-hero-orgs"><strong>23</strong> {% trans "Organizations already sharing data" %}</p>
    </div>
  </div>

  <div class="form-side">
    <form method="post" enctype="multipart/form-data" class="registration-form" aria-label="Registration form">
      {% csrf_token %}
      {% if form.non_field_errors %}
      <div class="alert alert-error" role="alert">
        {{ form.non_field_errors }}
      </div>
      {% endif %}

      <div class="form-group">
        <div class="form-row">
          <div class="form-field">
            <label for="{{ form.firstname.id_for_label }}"><span class="required">*</span> {% trans "First name" %}</label>
            {{ form.firstname }}
            {{ form.firstname.errors }}
          </div>
          <div class="form-field">
            <label for="{{ form.lastname.id_for_label }}"><span class="required">*</span> {% trans "Last name" %}</label>
            {{ form.lastname }}
            {{ form.lastname.errors }}
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="{{ form.email.id_for_label }}"><span class="required">*</span> {% trans "Email address" %}</label>
        {{ form.email }}
        {{ form.email.errors }}
      </div>

      <div class="form-group">
        <label for="{{ form.organization.id_for_label }}"><span class="required">*</span> {% trans "Organization name" %}</label>
        {{ form.organization }}
        {{ form.organization.errors }}
      </div>

      <div class="form-group">
        <label class="group-label"><span class="required">*</span> {% trans "Organization logo" %}</label>
        <div class="file-dropzone-wrapper">
          <div class="file-dropzone" id="logo-dropzone">
            <div class="dropzone-empty">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/>
                <path d="M12 12v9"/>
                <path d="m16 16-4-4-4 4"/>
              </svg>
              <p class="dropzone-text">Drag and drop your file here or <strong class="browse-text">browse</strong></p>
            </div>
            <div class="dropzone-filled" style="display: none;">
              <img class="file-preview" src="" alt="Logo preview">
              <div class="file-info">
                <span class="file-name"></span>
                <span class="file-size"></span>
              </div>
              <button type="button" class="file-remove" aria-label="Remove file">&times;</button>
            </div>
          </div>
          <div class="dropzone-hint-row">
            <span class="dropzone-hint">Max file size: 10 Mo</span>
          </div>
          {{ form.organization_logo }}
        </div>
        {{ form.organization_logo.errors }}
      </div>

      <div class="form-group">
        <label class="group-label">{% trans "Organization type" %}</label>
        <div class="checkbox-grid">
          {% for choice in form.organization_type %}
          <label class="checkbox-label">
            {{ choice.tag }} {{ choice.choice_label }}
          </label>
          {% endfor %}
        </div>
      </div>

      <button type="submit" class="btn-primary">{% trans "Apply" %}</button>
    </form>
  </div>
</div>
{% endblock %}