<div class="row">
  <div class="col-xs-12">

    <div id="calculator" class="page-header">
      <h1>Calculator</h1>
    </div>

    <div class="row">
      <div class="form-group col-xs-12 col-sm-8">
        <%= label_tag :input, "Input", class: 'control-label' %>
        <%= text_field_tag :input, nil, class: 'form-control', autofocus: true %>
      </div>
      <div class="form-group col-xs-12 col-sm-4">
        <%= label_tag :output_unit, "Output Unit", class: 'control-label' %>
        <%= text_field_tag :output_unit, nil, class: 'form-control' %>
      </div>

      <div class="form-group col-xs-6">
        <%= label_tag :ingredient, "Ingredient", class: 'control-label' %>
        <%= text_field_tag :ingredient, nil, class: 'form-control' %>
      </div>

      <div class="form-group col-xs-6">
        <%= label_tag :density, "Density", class: 'control-label' %>
        <%= text_field_tag :density, nil, class: 'form-control' %>
      </div>

      <div class="form-group col-xs-12">
        <%= label_tag :output, "Output", class: 'control-label' %>
        <%= text_field_tag :output, nil, class: 'form-control', readonly: true %>
      </div>

    </div>

    <div class="row">
      <div class="col-xs-12">
        <div id="errors_panel" class="panel panel-danger" style="display: none;">
          <div class="panel-heading">
            <h3 class="panel-title">Error</h3>
          </div>
          <div id="errors_container" class="panel-body">

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

  </div>
</div>
