{% extends 'template.html' %}

{% block title %}Add Room{% endblock %}

{% block page_content %}

    {% if room.errors is not empty %}
        <p>Errors found:</p>
        <ul>
            {% for error in room.errors %}
                <li>{{ error }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    <div class="card card-fluid">
      <h6 class="card-header"> Room </h6><!-- .card-body -->
      <div class="card-body">
        <!-- form -->
        <form method="post" id="formRoom" action="/rooms/create">
          <input type="hidden" name="job_id" value="{{ job.id }}">
          <!-- form-group -->
          <div class="form-group">
            <!-- form column -->
            <label for="inputName" class="col-md-3">Name</label> <!-- /form column -->
            <!-- form column -->
            <div class="col-md-12 mb-3">
              <input type="text" class="form-control" id="inputName" name="name" placeholder="Room Name" value="{{ room.name }}">
            </div><!-- /form column -->
          </div><!-- /form-group -->
          <hr>
          <!-- .form-actions -->
          <div class="form-actions">
            <button type="submit" class="btn btn-primary ml-auto">Save</button>
          </div><!-- /.form-actions -->
        </form><!-- /form -->
      </div><!-- /.card-body -->
    </div><!-- /.card -->

{% endblock %}

{% block page_includes %}

<script type="text/javascript">
  $(document).ready(function() {
      /**
       * Validate the form
       */
      $('#formRoom').validate({
          rules: {
              name: 'required'
          }
      });

  });
</script>

{% endblock %}