{% load wagtailimages_tags %}
<section class="saas-demo saas-demo--inline saas-demo--{{ self.background_style }}"
         data-width="{{ self.layout_width }}">
    <div class="saas-demo__container">
        <header class="saas-demo__header">
            <h2 class="saas-demo__title">{{ self.section_title }}</h2>
            {% if self.section_subtitle %}
            <div class="saas-demo__subtitle">{{ self.section_subtitle }}</div>
            {% endif %}
        </header>

        <form class="saas-demo__form" action="{% url "contact_form:contact-form-handler" %}" method="post">
                {% csrf_token %}
            <div class="saas-demo__fields">
                {% for field in self.form_fields %}
                <div class="saas-demo__field">
                    <label class="saas-demo__label" for="demo-{{ field.field_type }}">
                        {{ field.label }}
                        {% if field.required %}<span class="saas-demo__required">*</span>{% endif %}
                    </label>
                    {% if field.field_type == 'message' %}
                    <textarea class="saas-demo__textarea" 
                              id="demo-{{ field.field_type }}" 
                              name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
                              placeholder="{{ field.placeholder }}"
                              {% if field.required %}required{% endif %}></textarea>
                    {% elif field.field_type == 'company_size' %}
                    <select class="saas-demo__select" 
                            id="demo-{{ field.field_type }}" 
                            name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
                            {% if field.required %}required{% endif %}>
                        <option value="">{{ field.placeholder|default:"Select company size" }}</option>
                        <option value="1-10">1-10 employees</option>
                        <option value="11-50">11-50 employees</option>
                        <option value="51-200">51-200 employees</option>
                        <option value="201-500">201-500 employees</option>
                        <option value="500+">500+ employees</option>
                    </select>
                    {% else %}
                    <input class="saas-demo__input" 
                           type="{% if field.field_type == 'email' %}email{% elif field.field_type == 'phone' %}tel{% else %}text{% endif %}" 
                           id="demo-{{ field.field_type }}" 
                           name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
                           placeholder="{{ field.placeholder }}"
                           {% if field.required %}required{% endif %}>
                    {% endif %}
                </div>
                {% endfor %}
            </div>

            <button type="submit" class="saas-demo__submit">{{ self.submit_button_text }}</button>

            {% if self.privacy_text %}
            <div class="saas-demo__privacy">{{ self.privacy_text }}</div>
            {% endif %}
        </form>
    </div>
</section>