<%- include('partials/header', { title }) %>

<div class="columns is-centered">
  <div class="column is-7">
    <div class="pad-header">
      <div>
        <p class="eyebrow">Add a pad</p>
        <h1 class="title">Enter pad details</h1>
        <p class="subtitle">Fill out the basics so others can review it.</p>
      </div>
    </div>

    <form class="box" method="post" action="/pads">
      <div class="field">
        <label class="label" for="name">Pad name</label>
        <div class="control">
          <input class="input" id="name" name="name" type="text" required />
        </div>
      </div>

      <div class="field">
        <label class="label" for="brand">Brand</label>
        <div class="control">
          <input class="input" id="brand" name="brand" type="text" />
        </div>
      </div>

      <div class="field">
        <label class="label" for="description">Description</label>
        <div class="control">
          <textarea class="textarea" id="description" name="description" rows="4"></textarea>
        </div>
      </div>

      <div class="field is-grouped">
        <div class="control">
          <button class="button is-primary is-large" type="submit">Add pad</button>
        </div>
        <div class="control">
          <a class="button is-light" href="/">Cancel</a>
        </div>
      </div>
    </form>
  </div>
</div>

<%- include('partials/footer') %>
