{% load form_tags %}

<div class="card mb-4">
    <div class="card-body p-4">
        <form method="post" action="{% url 'services:contact_form' %}">
            {% csrf_token %}
            <input type="hidden" name="source" value="{{ source|default:'Contact Form' }}">
            {% if details %}
                <input type="hidden" name="details" value="{{ details }}">
            {% endif %}
            
            <input type="hidden" name="form_timestamp" value="{{ request.timestamp|default:timestamp }}">
            <div style="display:none;">
                <label for="website">Website (Leave this empty)</label>
                <input type="text" name="website" id="website" autocomplete="off">
            </div>
            
            {% if service %}
                <input type="hidden" name="service_id" value="{{ service.id }}">
                <input type="hidden" name="service_name" value="{{ service.name }}">
            {% endif %}
            {% if offering %}
                <input type="hidden" name="offering_id" value="{{ offering.id }}">
                <input type="hidden" name="offering_name" value="{{ offering.cloud_provider.name }}">
            {% endif %}
            {% if plan %}
                <input type="hidden" name="plan_id" value="{{ plan.id }}">
                <input type="hidden" name="plan_name" value="{{ plan.name }}">
            {% endif %}
            <input type="hidden" name="next" value="{{ request.path }}">
            
            <div class="mb-3">
                <label for="id_name" class="form-label">Your Name</label>
                {{ form.name|addclass:"form-control" }}
                {% if form.name.errors %}
                <div class="invalid-feedback d-block">{{ form.name.errors }}</div>
                {% endif %}
            </div>
            
            <div class="mb-3">
                <label for="id_email" class="form-label">Your Email Address</label>
                {{ form.email|addclass:"form-control" }}
                {% if form.email.errors %}
                <div class="invalid-feedback d-block">{{ form.email.errors }}</div>
                {% endif %}
            </div>

            <div class="mb-3">
                <label for="id_phone" class="form-label">Your Phone Number (Optional)</label>
                {{ form.phone|addclass:"form-control" }}
                {% if form.phone.errors %}
                <div class="invalid-feedback d-block">{{ form.phone.errors }}</div>
                {% endif %}
            </div>

            <div class="mb-3">
                <label for="id_company" class="form-label">Your Company (Optional)</label>
                {{ form.company|addclass:"form-control" }}
                {% if form.company.errors %}
                <div class="invalid-feedback d-block">{{ form.company.errors }}</div>
                {% endif %}
            </div>
            
            {% if choices %}
            <div class="mb-3">
                <label for="id_choice" class="form-label">{{ choice_label|default:"Please Select" }}</label>
                <select name="selected_choice" id="id_choice" class="form-control">
                    {% for choice_id, choice_name in choices %}
                        <option value="{{ choice_id }}|{{ choice_name }}">{{ choice_name }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
            
            <div class="mb-3">
                <label for="id_message" class="form-label">Your Message (Optional)</label>
                {{ form.message|addclass:"form-control" }}
                {% if form.message.errors %}
                <div class="invalid-feedback d-block">{{ form.message.errors }}</div>
                {% endif %}
            </div>
            
            <button type="submit" class="btn btn-primary">Send Message</button>
        </form>
    </div>
</div>