{% extends "base_view.html" %}
{% load staticfiles %}
{% load widget_tweaks %}

{% block title %} meliza-lab : bird colony : add clutch {% endblock title%}

{% block css %}
    <link href="{% static 'local/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">
{% endblock %}

{% block scripts %}
<script src="{% static 'local/js/moment.min.js' %}"></script>
<script src="{% static 'local/js/bootstrap-datetimepicker.min.js' %}"></script>
<script type="text/javascript">
  $(function () {
  $('#datetimepicker1').datetimepicker({ pickTime: false});
  });
</script>
{% endblock %}


{% block content %}

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">New clutch</h3>
  </div>
  <div class="panel-body">
    <form action="{% url 'birds:clutch' %}" class="form-horizontal" method="post" role="form">
      {% csrf_token %}
      <p><strong>Instructions</strong>: Only enter clutches once the number of chicks
        is known. Enter the father, mother, number of chicks, and the most likely date
        of birth. This will create records for the new birds and for the hatch events.
        You will need to manually set tag information later, when the chicks are tagged.
      </p>
      {% if form.non_field_errors %}
      <div class="alert alert-danger">{{ form.non_field_errors }}</div>
      {% endif %}
      <div class="form-group {% if form.sire.errors %}has-error{% endif %}">
        <label for="input-sire" class="col-sm-2 control-label">Sire</label>
        <div class="col-sm-5">
          {% render_field form.sire class+="form-control" %}
        </div>
      </div>

      <div class="form-group {% if form.dam.errors %}has-error{% endif %}">
        <label for="id_dam" class="col-sm-2 control-label">Dam</label>
        <div class="col-sm-5">
          {% render_field form.dam class+="form-control" %}
        </div>
      </div>

      <div class="form-group {% if form.hatch_date.errors %}has-error{% endif %}">
        <label for="id_hatch_date" class="col-sm-2 control-label">Hatch Date</label>
        <div class="col-sm-3">
          <div class="input-group date" id="datetimepicker1">
            {% render_field form.hatch_date class+="form-control" data-format="MM/dd/YYYY" %}
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>

      <div class="form-group {% if form.chicks.errors %}has-error{% endif %}">
        <label for="id_chicks" class="col-sm-2 control-label">Number of chicks</label>
        <div class="col-sm-3">
          {% render_field form.chicks class+="form-control" %}
        </div>
      </div>

      <div class="form-group {% if form.location.errors %}has-error{% endif %}">
        <label for="id_location" class="col-sm-2 control-label">Location</label>
        <div class="col-sm-5">
          {% render_field form.location class+="form-control" %}
        </div>
      </div>

      <div class="form-group {% if form.comments.errors %}has-error{% endif %}">
        <label for="id_comments" class="col-sm-2 control-label">Comments</label>
        <div class="col-sm-5">
          {% render_field form.comments class+="form-control" rows="3"%}
        </div>
      </div>

      <div class="form-group {% if form.user.errors %}has-error{% endif %}">
        <label for="id_user" class="col-sm-2 control-label">Entered by</label>
        <div class="col-sm-3">
          {% render_field form.user class+="form-control" %}
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Add Clutch</button>
        </div>
      </div>

    </form>
  </div>
</div>

{% endblock %}
