{% extends "central/base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block title %}{% trans "Contact Us!" %}{{ block.super }}{% endblock %}

{% block contact_active %}active{% endblock contact_active %}

{% block headjs %}{{ block.super }}
    <script>
        $( "ul label" ).addClass( "checkbox" );

        function toggle_on_contact_div(nm) {
            // Show a particular sub-contact form
            $(".toggle-section").hide()
            $("#"+nm+"_section").show()
        }

        $(function() {
            // On page load, and when the drop-down changes, show the relevant contact sub-form
            //    Note that I can't change this object ID, as it is generated by Django :(
            $("#id_contact_form-type").change(
                function() { toggle_on_contact_div($("#id_contact_form-type").val())
             }).ready(
                function()  {
                    toggle_on_contact_div($("#id_contact_form-type").val())

                    // If the contact form has a specific type, then don't
                    //allow the flexibility to change on the fly; it's a specific contact form.
                    if ($("#id_contact_form-type").val() != "") {
                        $("#id_contact_form-type").hide()
                        $("#id_contact_form-type").parent().select("label").hide();
                    }
            });
        });
    </script>
{% endblock headjs %}

{% block content %}
    <h1>Contact us!</h1>

    <p>Please fill out the form below, so we can respond to your inquiry as quickly as possible.</p>

    <form method="post" action="?next={{ next|default:"/" }}">
        {% csrf_token %}

        <div class="form-section" id="contact_section">
        {{ contact_form.as_p }}
        </div>

        <div class="form-section toggle-section" id="deployment_section">
            <h2>Deployment Scenario</h2>
            <p>The more you tell us about your deployment scenario (how you would be using KA Lite), the better advice we can give about getting set up.</p>
    
            {{ deployment_form.as_p }}
        </div>

        <div class="form-section toggle-section" id="support_section">
            <p>Thanks for your interest in KA Lite!  We are happy to offer support!  Due to an overwhelming response to KA Lite, it may take some time to respond.</p>
            <p>Please check our available documentation to see if your questions might be answered.
                <ul class="list">
                  <li><a href="/faq/">FAQ</a> - Answers to our most frequently asked questions</li>
                  <li><a href="https://groups.google.com/a/learningequality.org/forum/?hl=en&fromgroups#!forum/support">Support Google Group</a> - search previously submitted questions, and our answers.</li>
                  <li><a href="/wiki/">KA Lite User's manual</a> - Our wiki contains the latest documentation on installing, setting up, and using KA Lite!</li>
                  <li><a href="http://forums.learningequality.org">Forums</a> - Our community based support environment that lets KA Lite users help each other when they have issues. </li>
                </ul>
            </p>

            <div class="support_form">
            {{ support_form.as_p }}
            </div>
        </div>

        <div class="form-section toggle-section" id="contribute_section">
            <p>Thanks so much for considering contributing to this project!</p>
            <p>Please find some <a href="/wiki/contribute/">basic information about making contributions on our wiki</a>.</p>
            {{ contribute_form.as_p }}
        </div>

        <div class="form-section toggle-section" id="info_section">
        {{ info_form.as_p }}
        </div>

        <div class="form-section">
     
              <label class="checkbox"> 
                <input type="checkbox" name="hack_cc_email" value="send">
                    Please send a copy of this contact request to my email address above.
                </input>
              </label>

  
            <div><p><input type="submit" class="button" value="Send Message" /></p></div>
        </div>
    </form>

    <p>
        Note: if you are unable to submit this form, contact us through email: 
        <a href="mailto:{{ central_contact_email }}">{{ central_contact_email }}</a>
    </p>
{% endblock content %}