{% extends 'layout.twig' %}

{% block title %}Add New Item{% endblock %}

{% block content %}

<!-- page header -->
<header class="row">
  <div class="columns twelve">
    <h1>Add new item</h1>
  </div>
</header>

<section class="row">
  <div class="columns twelve">
    <form action="/item/add" method="POST">
      <div class="row">
        <div class="columns twelve">
          <label for="item_name">Item name:</label>
          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name" required>
        </div>
      </div>

      <div class="row">
        <div class="six columns">
          <label for="item_serial">Serial number:</label>
          <input class="u-full-width" type="text" placeholder="0123456789" id="item_serial" name="item_serial">
        </div>

        <div class="six columns">
          <label for="item_sku">SKU number:</label>
          <input class="u-full-width" type="text" placeholder="ABC12345678" id="item_sku" name="item_sku">
        </div>
      </div>

      <div class="row">
        <div class="six columns">
          <label for="item_purchase_from">Purchased from:</label>
          <input class="u-full-width" type="text" placeholder="Newegg" id="item_purchase_from" name="item_purchase_from">
        </div>

        <div class="six columns">
          <label for="item_purchase_date">Purchased at:</label>
          <input class="u-full-width" type="datetime-local" id="item_purchase_date" name="item_purchase_date">
        </div>
      </div>

      <div class="row">
        <div class="six columns">
          <label for="item_manufacturer">Manufacturer:</label>
          <input class="u-full-width" type="text" placeholder="Manufacturer" id="item_manufacturer" name="item_manufacturer">
        </div>

        <div class="six columns">
          <label for="item_type">Item type</label>
          <select class="u-full-width" id="item_type" name="item_type">
            <option value="cpu">Processor</option>
            <option value="motherboard">Motherboard</option>
            <option value="memory">Memory (RAM)</option>
            <option value="psu">Power Supply</option>
            <option value="case">Case</option>
            <option value="storage">Storage Device</option>
            <option value="gpu">Graphics Card</option>
          </select>
        </div>
      </div>

      <input class="button-primary u-full-width" type="submit" value="Submit">
    </form>
  </div>
</section>

{% endblock %}