{% extends 'Chernysheva_nail/base_Cernysheva_nail_template.html' %}

{% load static %}


{% block form %}

  <div class="col-md-6 offset-md-3 text-center after-post">
    <form action="{% url 'form_create_appointment' %}" method="post">
      {% csrf_token %}

      <div class="form-row">

        <div class="col-md-4 mb-3">
          <label for="validationServer01">Имя</label>
          <input type="text" class="form-control is-invalid" id="validationServer01" placeholder="Имя" required>
          <div class="invalid-feedback">
            Введите имя
          </div>
        </div>



        <div class="col-md-4 mb-3">
          <label for="validationServer01">Фамилия</label>
          <input type="text" class="form-control is-invalid" id="validationServer01" placeholder="Фамилия" required>
          <div class="invalid-feedback">
            Введите фамилию
          </div>
        </div>


        <div class="col-md-4 mb-3">
          <label for="validationServerUsername">Номер телефона</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroupPrepend3">+7</span>
            </div>
            <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="номер" aria-describedby="inputGroupPrepend3" required>
            <div class="invalid-feedback">
              Введите номер телефона.
            </div>
          </div>
        </div>
      </div>

      <div class="form-row">

          <div class="align-items-center">
            <div class="col-auto my-1">
              <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect"></label>
              <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
                <option value="1">{% block selectopt1 %}Маникюр{% endblock %}
                </option>
                <option value="2">{% block selectopt2 %}Снятие{% endblock %}</option>
                <option value="3">{% block selectopt3 %}Дизайн{% endblock %}</option>
                <option value="4">{% block selectopt4 %}Наращивание{% endblock %}</option>
                <option value="5">{% block selectopt5 %}Маникюр с покрытием{% endblock %}</option>
                <option value="6">{% block selectopt6 %}Всё{% endblock %}</option>
              </select>
            </div>
          </div>



          <div class="align-items-center">
            <div class="col-auto my-1">
              <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect"></label>
              <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
                <option value="1">{% block selectopt_d1 %}18.06.19{% endblock %}
                </option>
                <option value="2">{% block selectopt_d2 %}19.06.19{% endblock %}</option>
                <option value="3">{% block selectopt_d3 %}20.06.19{% endblock %}</option>
                <option value="4">{% block selectopt_d4 %}21.06.19{% endblock %}</option>
                <option value="5">{% block selectopt_d5 %}22.06.19{% endblock %}</option>
                <option value="6">{% block selectopt_d6 %}23.06.19{% endblock %}</option>
              </select>
            </div>
          </div>


          <div class="align-items-center">
            <div class="col-auto my-1">
              <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect"></label>
              <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
                <option value="1">{% block selectopt_с1 %}12:00{% endblock %}
                </option>
                <option value="2">{% block selectopt_с2 %}14:30{% endblock %}</option>
                <option value="3">{% block selectopt_с3 %}17:00{% endblock %}</option>
                <option value="4">{% block selectopt_с4 %}19:30{% endblock %}</option>
              </select>
            </div>
          </div>

      </div>

      <div class="btn-mrg">
        <button class="btn btn-primary load-more" type="submit">
        Записаться
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
        </button>
      </div>
    </form>
  </div>
  {{form.name}}
  {{form.second_name}}
  {{form.phone_number}}
  {{form.date_appointment_base}}
  {{form.date_appointment}}
  {{form.time_appointment_base}}

{% endblock %}