## mako
<%page expression_filter="h"/>
<%!
from django.utils.translation import ugettext as _
from openedx.core.djangolib.markup import Text, HTML
from datetime import datetime
import pytz
from django.conf import settings
%>
<%inherit file="../main.html" />
<%namespace name='static' file='../static_content.html'/>
<%block name="pagetitle">${_("Contact Us")}</%block>

<div class="page-heading">
  <h1>${_("Contact Us")}</h1>
</div>

<section class="static-content">
  <div class="grid-manual grid-container">
    <div class="inner-container">
      <div class="row">
        <div class="col col-12 sm-col-10 md-col-8 lg-col-6 xl-col-6 col-centered">
          <form id="contact_form" class="form-block">
            <div class="input-group">
              <label for="">Email*</label>
              <input type="text" class="input-lg" id="email">
            </div>
            <div class="input-group">
              <label for="">Full Name*</label>
              <input type="text" class="input-lg" id="name">
            </div>
            <div class="input-group">
              <label for="">I am a</label>
              <div class="custom-select">
                <select name="user_type" id="user_type" class="input-lg">
                  <option value="">Select</option>
                  <option value="learner">Learner</option>
                  <option value="teacher">Teacher</option>
                  <option value="other">Other</option>
                </select>
              </div>
            </div>
            <div class="input-group">
              <label for="">Inquiry Type*</label>
              <div class="custom-select">
                <select id="subject" class="input-lg">
                  <option value="">Select</option>
                  <option value="payments">Payments</option>
                  <option value="certificates">Certificates</option>
                  <option value="assessments">Assessments</option>
                  <option value="videos">Videos</option>
                  <option value="discussion-forums">Discussion Forums</option>
                  <option value="mobile-application">Mobile Application</option>
                </select>
              </div>
            </div>
            <div class="input-group">
              <label for="">Message*</label>
              <textarea id="details" rows="10"></textarea>
            </div>
            <input type="text" name="issue_type" id="issue_type" value="contact" class="hidden">
            <button class="btn-brand btn-client btn-lg" id="submit_btn">Submit</button>
            <div class="input-group">
              <label for="" class="text-light">* Required Fields</label>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<a href="#success-message" class="media hidden" id="success-message-btn" rel="leanModal">
</a>
<div id="success-message" class="modal">

    <div class="alert alert-success" role="alert" aria-labelledby="alert-title-success" tabindex="-1">
        <span class="icon alert-icon icon-check" aria-hidden="true">
          <i class="fa fa-check" aria-hidden="true"></i>
        </span>

        <div class="alert-message">
          <h3 class="alert-title" id="alert-title-success">
              ${_("Thank you for your inquiry")}
          </h3>
          <p class="alert-copy-with-title">
              We'll get back to you within 24 hours.
          </p>
        </div>
    </div>
</div>


<%block name="js_extra">
  <script src="${static.url('js/contact-form.js')}"></script>
</%block>
