{% extends "base.html" %}

{% block title %} Code 9ja - Learn about{% endblock %}

{% block keywords %}Keywords specific to this page{% endblock %}

{% block description %}Description specific to this page{% endblock %}

{% block author %}Author Name{% endblock %}

{% block content %}

    <div class="inner-banner">
        <section class="w3l-breadcrumb">
        </section>
    </div>
   
    <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
          <div class="col col-xl-10">
            <div class="" style="border-radius: 1rem;">
              <div class="row g-0">
      
                <div class="col-md-12 col-lg-12 d-flex align-items-center">
                  <div class="card-body p-4 p-lg-5 text-black">

                    <h1 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Apply Now for {{ course.title }} Course</h1>

                    <form action="{{ url_for('apply_now', course_id=course.id) }}" method="POST">
                      <h3 class="fw-normal mt-5 mb-5 pb-3" style="letter-spacing: 1px;">Course Details</h3>
      
                      <div class="row mb-4">
                        <div class="col-md-6">
                          <div class="form-outline">
                            <label class="form-control form-control-lg" > {{ course.title }} </label>
                            <p class="form-label">Course Name</p>
                          </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-outline">
                                <label class="form-control form-control-lg" > {{ course.deadline_date }} </label>
                                <p class="form-label">Application Deadline</p>
                              </div>
                        </div>
                      </div>
      
                      <div class="row mb-4">
                        <div class="col-md-6">
                          <div class="form-outline">
                            <label class="form-control form-control-lg" >{{ course.start_date }} </label>
                            <p class="form-label">Course Starts</p>
                          </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-outline">
                                <label class="form-control form-control-lg" ># {{ course.cost }} </label>
                                <p class="form-label">Course Price</p>
                              </div>
                        </div>
                      </div>

                      <h3 class="fw-normal mt-5 mb-5 pb-3" style="letter-spacing: 1px;">User Details</h3>
      
                      <div class="row mb-4">
                        <div class="col-md-6">
                          <div class="form-outline">
                            <label class="form-control form-control-lg" >{{ user.first_name }} {{ user.last_name }}</label>
                            <p class="form-label">Your Name</p>
                          </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-outline">
                                <label class="form-control form-control-lg" >{{ user.email }}</label>
                                <p class="form-label">Your Email</p>
                              </div>
                        </div>
                      </div>
      
      
                      <div class="form-outline mb-4">
                       <input type="checkbox" name="agree" value="agree">
                        <label class="form-label">I agree to the <a href="{{ url_for('terms_page') }}">Terms and Conditions</a></label>
                      </div>

                      <div class="form-outline mb-4">
                      <input type="hidden" name="course_id" value="{{ course.id }}">
                      </div>
      
                      <div class="d-flex justify-content-center">
                        <button class="btn btn-dark btn-lg" id="next-btn" type="submit">Next</button>
                      </div>
      
                   
            
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

     

    {% endblock %}
    
    <!-- /contact1 -->