{% extends 'layouts/default.html' %}
{% from 'forms/macros.html' import render_field %}
{% block title %}Add IPv4 rule{% endblock %}
{% block content %}
  <h2>{{ title or 'New'}} IPv4 rule</h2>
  <form action="{{ action_url }}" method="POST">
  {{ form.hidden_tag() if form.hidden_tag }}
  <div class="row">
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-8">
          {{ render_field(form.source) }}
        </div>
        <div class="col-sm-4">
            {{ render_field(form.source_mask) }}
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8">
          {{ render_field(form.dest) }}
        </div>
        <div class="col-sm-4">
            {{ render_field(form.dest_mask) }}
        </div>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="row">
            {{ render_field(form.protocol) }}
      </div>
        <div class="row">
            {{ render_field(form.fragment, size=4) }}
        </div>
    </div>
    <div class="col-sm-2">
          {{ render_field(form.flags, size=9) }}
    </div>

  </div>

  <div class="row">
    <div class="col-sm-4">
        {{ render_field(form.source_port, tooltip="Possible values: x;>x;x-y;<x;<=x;>=x") }}
    </div>
    <div class="col-sm-4">
        {{ render_field(form.dest_port, tooltip="Possible values: x;>x;x-y;<x;<=x;>=x") }}
    </div>
    <div class="col-sm-4">
        {{ render_field(form.packet_len, tooltip="Possible values: x;>x;x-y;<x;<=x;>=x")  }}
    </div>
  </div>


  <div class="row">
    <div class="col-sm-4">
      {{ render_field(form.action) }}
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label for="inputExpiration" class="control-label">Expiration date</label>
        <div class='input-group date' id='dateTimeExpires'>
                      <!--
                      <input type='text' name="expires" class="form-control" />

                      -->
                      {{ form.expires(class_='form-control') }}
                      <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"></span>
                      </span>
        </div>

        {% if form.expires.errors %}
            {% for e in form.expires.errors %}
                <p class="help-block">{{ e }}</p>
            {% endfor %}
        {% endif %}
      </div>
    </div>
    <div class="col-sm-4">
    </div>  
  </div>

  <div class="row">
    <div class="col-sm-12">
         {{ render_field(form.comment) }}
    </div>
  </div>

  <div class="row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Save</button>
    </div>
  </div>
  </form>
{% endblock %}