{% extends 'layouts/default.html' %}
{% block title %}Add IPv4 rule{% endblock %}
{% block content %}
  <form action="/addrule" method="post">
  <div class="row">
    <div class="col-sm-8">
      <div class="form-group">
        <label for="inputSourceAdress" class="control-label">Source address</label>
        <input type="text" class="form-control" name="source_adress" id="inputSourceAdress" placeholder="S Network address" />
      </div>
      <div class="form-group">  
        <label for="inputDestinationAdress" class="control-label">Destination address</label>
        <input type="text" class="form-control" name="destination_adress" id="inputDestinationAdress" placeholder="Network address" />
      </div>  
    </div>
    <div class="col-sm-4">
        <div class="form-group "> 
          <label for="inputProtocol" class="control-label">Protocol</label>
            <div class="radio">
            <label>
              <input type="radio" name="protocol" value="icmp">
              ICMP
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="protocol" value="tcp">
              TCP
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="protocol" value="udp">
              UDP
            </label>
          </div>
        </div>
    </div>
  </div>  

  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <label for="sourcePort" class="control-label">Source port</label>
        <input type="text" class="form-control date" name="source_port">
      </div>  
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label for="destinationPort" class="control-label">Destination port</label>
        <input type="text" class="form-control date" name="destination_port">
      </div>  
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label for="packetLength" class="control-label">Packet length</label>
        <input type="text" class="form-control date" name="packet_length">
      </div>  
    </div>
  </div>


  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">  
        <label for="inputAction" class="control-label">Action</label>
          <select class="form-control" name="action" id="inputAction">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
      </div>  
    </div>    
    <div class="col-sm-6">
      <div class="form-group">
        <label for="inputExpiration" class="control-label">Expiration date</label>
        <div class='input-group date' id='dateTimeExpires'>
                      <input type='text' name="expire_date" class="form-control" />
                      <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"></span>
                      </span>
                  </div>
      </div>            
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="inputComment" class="control-label">Comments</label>
        <textarea class="form-control" rows="3" name="comment" id="inputComment"></textarea>
      </div>
    </div>
  </div>

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

{% endblock %}