<br>
<p align="center" style="font-size:155%;">Add New Tyre</p>
<div class="center-box">
  <%= form_with(model: tyre, local: true) do |form| %>
    <% if tyre.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(tyre.errors.count, "error") %> prohibited this tyre from being saved:</h2>

        <ul>
        <% tyre.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
        </ul>
      </div>
    <% end %>
    <div class="col-md-12">
      <br>
      <div class="field">
        <%= form.label :brand %>
        <input id="tyre_brand" type="text" name="tyre[brand]" class="form-control" placeholder="tyre brand">
      <div class="field">
        <%= form.label :serial %>
        <input id="tyre_serial" name="tyre[serial]" class="form-control" placeholder="serial number"></input>
      </div>
      <div class="field">
        <%= form.text_field :start_distance, id: :tyre_start_distance, :value => 0, hidden: true %>
      </div>

      <div class="field">
        <%= form.text_field :total_distance, id: :tyre_total_distance, :value => 0, hidden: true %>
      </div>

      <div class="field">
        <%= form.label :status %>
        <input id="tyre_status" value="available" readonly="readonly" type="text" name="tyre[status]" class="form-control">
      </div>
      <br>
      <div class="actions" align="center" >
        <button class="btn btn-success" type="submit" name="commit" value="Create Tyre" data-disable-with="Create Tyre">Confirm</button>
      </div>
      <br>
    </div>
  <% end %>
</div>

<style>
  .center-box {
    border: black 2px solid;
    height: auto;
    width: 25%;
    margin:0 auto;
  }
</style>