¤¤ title ¤¤
<h1>¤title¤</h1>

¤¤ subtitle ¤¤
<h2>¤title¤</h2>

¤¤ item_link ¤¤
<a href="./?page=¤page¤&action=show&id=¤id¤">¤name¤</a>

¤¤ message ¤¤
<div onClick="JavaScript:hideMessage()"
     id="message"
     class="¤type¤">
  ¤message¤
</div>

¤¤ user_table ¤¤
<form id="newloan"
      class="hidden"
      method="GET">
  <input type="hidden"
         name="action"
         value="checkout" />
</form>
<table id="user-table">
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>
        Username
      </th>
      <th>
        Loan
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody class="single">
    ¤rows¤
  </tbody>
</table>

¤¤ user_row ¤¤
<tr>
  <td>
    ¤item_link¤<span title="¤notes¤">¤has_notes¤</span>
  </td>
  <td>
    ¤name¤
  </td>
  <td>
    ¤loan¤
  </td>
  <td>
    <button form="newloan"
            name="user"
            value="¤name¤">
      New loan
    </button>
  </td>
</tr>

¤¤ product_page ¤¤
<div id="product-table">
    ¤product_table¤
</div>

¤¤ product_table ¤¤
<table>
  <thead>
    <tr>
      <th class="status">
      </th>
      <th>
        Name
      </th>
      <th>
        Serial number
      </th>
      <th>
        Status
      </th>
    </tr>
  </thead>
  <tbody class="¤type¤">
    ¤rows¤
  </tbody>
</table>

¤¤ product_row ¤¤
<tr>
  <td class="status ¤status¤">
  </td>
  <td>
    ¤item_link¤
  </td>
  <td>
    ¤serial¤
  </td>
  <td>
    ¤note¤
  </td>
</tr>

¤¤ product_match_row ¤¤
<tr>
  <td class="status ¤status¤">
  </td>
  <td colspan="3">
    <dl>
      ¤details¤
    </dl>
  </td>
</tr>

¤¤ product_match ¤¤
<dt>
  ¤name¤:
</dt>
<dd>
  ¤value¤
</dd>

¤¤ template_management ¤¤
<div>
  <h2>Templates</h2>
  <form class="dark templates"
        onSubmit="JavaScript:loadTemplate(event)">
    <datalist id="template_suggest"></datalist>
    <input type="hidden"
           name="page"
           value="new" />
    <input onFocus="JavaScript:suggest(this, 'template')"
           list="template_suggest"
           autocomplete="off"
           type="text"
           name="template"
           value="¤template¤"
           placeholder="Name" />
    <button>
      Load
    </button>
    <button onClick="JavaScript:saveTemplate(event)">
      Save
    </button>
    <button onClick="JavaScript:deleteTemplate(event)">
      Delete
    </button>
  </form>
</div>

¤¤ product_details ¤¤
<div class="column">
  <div id="product-details">
    <h2>Product details</h2>
    <form id="product-data"
          onSubmit="JavaScript:saveProduct(event)"
          class="data">
      <input type="hidden"
             name="id"
             value="¤id¤" />
      <datalist id="field_suggest"></datalist>
      <datalist id="tag_suggest"></datalist>
      <table>
        <tfoot>
          <tr>
            <td>
            </td>
            <td>
              <button id="save"
                      class="right">
                Save
              </button>
              <button id="reset"
                      class="right">
                Reset
              </button>
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Name:
            </td>
            <td>
              <input type="text"
                     name="name"
                     value="¤name¤"
                     onFocus="JavaScript:suggestContent(this)"
                     list="name_suggest"
                     autocomplete="off" />
              <datalist id="name_suggest"></datalist>
            </td>
          </tr>
          <tr>
            <td>
              Manufacturer:
            </td>
            <td>
              <input type="text"
                     name="brand"
                     value="¤brand¤"
                     onFocus="JavaScript:suggestContent(this)"
                     list="brand_suggest"
                     autocomplete="off" />
              <datalist id="brand_suggest"></datalist>
            </td>
          </tr>
          <tr>
            <td>
              Invoice number:
            </td>
            <td>
              <input type="text"
                     name="invoice"
                     value="¤invoice¤" />
            </td>
          </tr>
          <tr id="before_info">
            <td>
              Serial number:
            </td>
            <td>
              <input type="text"
                     name="serial"
                     value="¤serial¤" />
            </td>
          </tr>
          ¤info¤
          <tr>
            <td>
              <input onKeyPress="JavaScript:addField(event)"
                     onFocus="JavaScript:suggest(this, 'field')"
                     list="field_suggest"
                     autocomplete="off"
                     class="newfield"
                     type="text"
                     name="new_key"
                     placeholder="New field" />
              <button class="minibutton"
                      onClick="addField(event)">
                +
              </button>
            </td>
            <td>
            </td>
          </tr>
          <tr>
            <td>
              Tags:
            </td>
            <td id="tags">
              ¤tags¤
              <input onKeyPress="JavaScript:addTag(event)"
                     onFocus="JavaScript:suggest(this, 'tag')"
                     list="tag_suggest"
                     autocomplete="off"
                     class="newtag"
                     type="text"
                     name="new_tag"
                     placeholder="New tag" />
              <button class="minibutton"
                      onClick="JavaScript:addTag(event)">
                +
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
    <form id="product-actions"
          class="¤hidden¤">
      <input type="hidden"
             name="id"
             value="¤id¤" />
      <button onClick="JavaScript:discardProduct(event)">
        Discard product
      </button>
      <button onClick="JavaScript:toggleService(event)">
        ¤service¤
      </button>
    </form>
  </div>
  <div id="product-attachments"
       class="¤hidden¤">
    <h2>Attachments</h2>
    ¤attachments¤
    <form id="attachment_upload"
          onSubmit="JavaScript:uploadAttachment(event)">
      <input type="hidden"
             name="id"
             value="¤id¤" />
      <input id="uploadfile"
             name="uploadfile"
             type="file"
             onchange="showFile(event)"/>
      <input id="filename"
             name="filename"
             type="text"
             placeholder="Choose a file..."
             onclick="selectFile(event)"
             readonly />
      <button>Upload</button>
    </form>
  </div>
  <div id="product-label"
       class="¤label_hidden¤">
    <h2>Label</h2>
    ¤label¤
  </div>
</div>

¤¤ product_details_readonly ¤¤
<div class="column">
  <div id="product-details">
    <h2>Product details</h2>
    <div id="product-data"
         class="data">
      <table>
        <tbody class="single fixedwidth">
          <tr>
            <td>
              Name:
            </td>
            <td>
              ¤name¤
            </td>
          </tr>
          <tr>
            <td>
              Manufacturer:
            </td>
            <td>
              ¤brand¤
            </td>
          </tr>
          <tr>
            <td>
              Invoice number:
            </td>
            <td>
              ¤invoice¤
            </td>
          </tr>
          <tr id="before_info">
            <td>
              Serial number:
            </td>
            <td>
              ¤serial¤
            </td>
          </tr>
          ¤info¤
          <tr>
            <td>
              Tags:
            </td>
            <td id="tags">
              ¤tags¤
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div id="product-attachments"
       class="¤hidden¤">
    <h2>Attachments</h2>
    ¤attachments¤
  </div>
</div>

¤¤ product_details_public ¤¤
<div id="product-details">
  <h2>Product details</h2>
  <div id="product-data"
       class="data">
    <table>
      <tbody class="single fixedwidth">
        <tr>
          <td>
            Name:
          </td>
          <td>
            ¤name¤
          </td>
        </tr>
        <tr>
          <td>
            Manufacturer:
          </td>
          <td>
            ¤brand¤
          </td>
        </tr>
        <tr id="before_info">
          <td>
            Serial number:
          </td>
          <td>
            ¤serial¤
          </td>
        </tr>
        ¤info¤
        <tr>
          <td>
            Tags:
          </td>
          <td id="tags">
            ¤tags¤
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

¤¤ product_meta ¤¤
<div class="column">
  <div id="product-direct-checkout" class="¤checkout_hidden¤">
    <h2>Check out</h2>
    <form class="light"
          onSubmit="JavaScript:checkoutProduct(event)">
      <datalist id="user_suggest"></datalist>
      <input type="hidden"
             name="page"
             value="checkout" />
      <input type="hidden"
             id="product"
             name="product"
             value="¤serial¤" />
      <label>Loan length:</label>
      ¤loan_presets¤
      <br/>
      <label for="end">End date:</label>
      <input type="text"
             id="end"
             onClick="JavaScript:calendar(event)"
             name="end"
             value="¤end¤" />
      <br/>
      <label for="note">Notes:</label>
      <textarea id="notes"
                name="notes"></textarea>
      <br/>
      <label for="user">Username:</label>
      <input onFocus="JavaScript:suggest(this, 'user')"
             type="text"
             name="user"
             list="user_suggest"
             autocomplete="off"
             placeholder="Username"
             required />
      <button type="submit">
        Check out
      </button>
    </form>
  </div>
  <div id="product-history">
    <h2>Product history</h2>
    ¤history¤
  </div>
</div>

¤¤ attachment_list ¤¤
<ul class="attachment-list">
  ¤attachments¤
</ul>

¤¤ attachment ¤¤
<li>
  <strong>¤name¤</strong> (¤date¤): <a href="./?page=dl&id=¤id¤">Download</a>
  <br/>
  <form onSubmit="JavaScript:deleteAttachment(event)">
    <input type="hidden"
           name="id"
           value="¤id¤" />
    <input type="hidden"
           name="name"
           value="¤name¤" />
    <button>Delete</button>
  </form>
</li>

¤¤ product_label ¤¤
<div class="qr">
  <a href="./?page=print&id=¤id¤"
     title="Print">
    <span>¤name¤</span>
    <img src="./?page=qr&id=¤id¤">
    <span>¤serial¤</span>
  </a>
</div>

¤¤ label_page ¤¤
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="./template.css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>¤title¤</title>
  </head>
  <body>
    ¤label¤
  </body>
</html>

¤¤ info_item ¤¤
<tr>
  <td>
    ¤name¤:
  </td>
  <td>
    <input type="text"
           class="info_item"
           name="¤key¤"
           value="¤value¤"
           onFocus="JavaScript:suggestContent(this)"
           list="¤key¤_suggest"
           autocomplete="off" />
    <datalist id="¤key¤_suggest"></datalist>
  </td>
</tr>

¤¤ info_item_readonly ¤¤
<tr>
  <td>
    ¤name¤:
  </td>
  <td>
    ¤value¤
  </td>
</tr>

¤¤ tag ¤¤
<p>
  <span class="tag">
    <input type="hidden"
           name="tag[]"
           value="¤tag¤" />
    ¤tag¤
    <a class="tagremove"
       onClick="JavaScript:removeTag(event)">
      x
    </a>
  </span>
</p>

¤¤ tag_readonly ¤¤
<p>
  <span class="tag">
    ¤tag¤
  </span>
</p>

¤¤ user_details ¤¤
<div class="column">
  <div id="user-details">
    <form onSubmit="JavaScript:updateUser(event)">
      <input type="hidden"
             name="id"
             value="¤id¤" />
      <table>
        <tfoot>
          <tr>
            <td>
            </td>
            <td>
              <button class="right"
                      id="save">
                Save
              </button>
              <button class="right"
                      id="reset">
                Reset
              </button>
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Name:
            </td>
            <td>
              <input type="text"
                     value="¤displayname¤"
                     disabled />
            </td>
          </tr>
          <tr>
            <td>
              Username:
            </td>
            <td>
              <input type="text"
                     name="name"
                     value="¤name¤" />
            </td>
          </tr>
          <tr>
            <td>
              Notes:
            </td>
            <td>
              <textarea name="notes">¤notes¤</textarea>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
    <form method="GET">
      <input type="hidden"
             name="action"
             value="checkout" />
      <button name="user"
              value="¤name¤">
        New loan
      </button>
    </form>
  </div>
</div>
<div class="column">
  <div id="active-loans">
    <h2>Current loans</h2>
    ¤active_loans¤
  </div>
  <div id="inactive-loans">
    <h2>Old loans</h2>
    ¤inactive_loans¤
  </div>
</div>

¤¤ user_loan_card ¤¤
<div class="loan">
  <div class="status ¤status¤"></div>
  <table class="data">
    <tr>
      <th>Product:</th>
      <td>¤name¤</td>
    </tr>
    <tr>
      <th>Serial:</th>
      <td>¤serial¤</td>
    </tr>
    <tr>
      <th>Loan created by:</th>
      <td>¤initiator¤</td>
    </tr>
    <tr>
      <th>Validity:</th>
      <td>¤start_date¤ - ¤end_date¤</td>
    </tr>
    <tr class="¤hidden¤">
      <th>Notes:</th>
      <td class="notes">¤notes¤</td>
    </tr>
  </table>
  <div class="misc">
    ¤misc¤
  </div>
</div>

¤¤ product_loan_card ¤¤
<div class="loan">
  <div class="status ¤status¤"></div>
  <table class="data">
    <tr>
      <th>Loaned to:</th>
      <td>¤name¤</td>
    </tr>
    <tr>
      <th>Loan created by:</th>
      <td>¤initiator¤</td>
    </tr>
    <tr>
      <th>Validity:</th>
      <td>¤start_date¤ - ¤end_date¤</td>
    </tr>
    <tr class="¤hidden¤">
      <th>Notes:</th>
      <td class="notes">¤notes¤</td>
    </tr>
  </table>
  <div class="misc">
    ¤misc¤
  </div>
</div>

¤¤ public_user_details ¤¤
<div id="public-message" class="¤hidden¤">
  ¤message¤
</div>
<div id="public-active-loans">
  <h2>Current loans</h2>
  ¤active_loans¤
</div>
<div id="public-inactive-loans">
  <h2>Old loans</h2>
  ¤inactive_loans¤
</div>

¤¤ public_loan_table ¤¤
<table class="history">
  <thead>
    <tr>
      <th class="status">
      </th>
      <th>
        Product
      </th>
      <th>
        Serial number
      </th>
      <th>
        Start date
      </th>
      <th>
        End date
      </th>
    </tr>
  </thead>
  <tbody class="single">
    ¤rows¤
  </tbody>
</table>

¤¤ public_loan_table_row ¤¤
<tr>
  <td class="status ¤status¤">
  </td>
  <td>
    ¤name¤
  </td>
  <td>
    ¤serial¤
  </td>
  <td>
    ¤start_date¤
  </td>
  <td>
    ¤end_date¤
  </td>
</tr>

¤¤ loan_extend_form ¤¤
<button onClick="JavaScript:showExtend(event)">
  Extend
</button>
<form class="renew_confirm hidden"
      onSubmit="JavaScript:extendLoan(event)">
  <input type="hidden"
         name="product"
         value="¤id¤" />
  <input onClick="JavaScript:calendar(event)"
         id="¤id¤_date"
         class="narrow"
         type="text"
         name="end"
         value="¤end_new¤" />
  <button>
    Save
  </button>
</form>

¤¤ checkout_page ¤¤
<div class="column">
  <div id="user-select">
    <h2>Choose borrower</h2>
    <form class="dark"
          action="./"
          method="GET">
      <datalist id="user_suggest"></datalist>
      <input type="hidden"
             name="page"
             value="checkout" />
      <div>
        <label for="user">
          Username:
        </label>
        <input onFocus="JavaScript:suggest(this, 'user')"
               type="text"
               name="user"
               id="user"
               list="user_suggest"
               autocomplete="off"
               placeholder="Username"
               value="¤user¤" />
        <button type="submit" >
          Find
        </button>
      </div>
      <div>
        <label for="email">
          E-mail:
        </label>
        <input type="text"
               name="email"
               id="email"
               autocomplete="off"
               placeholder="E-mail"
               value="¤email¤" />
      </div>
      <div>
        <label for="displayname">
          Name:
        </label>
        <input type="text"
               name="displayname"
               id="displayname"
               value="¤displayname¤"
               disabled />
      </div>
      <div>
        <label for="user-notes">
          Notes:
        </label>
        <textarea name="notes"
                  id="user-notes"
                  disabled>¤notes¤</textarea>
      </div>
    </form>
  </div>
  <div id="product-checkout">
    <h2>Check out product</h2>
    <form class="light"
          onSubmit="JavaScript:checkoutProduct(event)">
      <input type="hidden"
             name="page"
             value="checkout" />
      <input type="hidden"
             name="user"
             value="¤user¤">
      <label>Loan length:</label>
      ¤loan_presets¤
      <br/>
      <label for="end">End date:</label>
      <input type="text"
             id="end"
             onClick="JavaScript:calendar(event)"
             name="end"
             value="¤end¤"
             ¤disabled¤ />
      <br/>
      <label for="loan-notes">Notes:</label>
      <textarea id="loan-notes"
                name="notes"
                ¤disabled¤></textarea>
      <br/>
      <label for="product">Product:</label>
      <input type="text"
             id="product"
             name="product"
             placeholder="Serial number"
             required
             ¤disabled¤ />
      <button>
        Check out
      </button>
    </form>
  </div>
</div>
<div class="column">
  ¤subtitle¤
  ¤loan_table¤
</div>

¤¤ loan_preset_button ¤¤
<button onClick="JavaScript:loanLength(event, ¤count¤, '¤type¤')"
        type="button">
  ¤description¤
</button>

¤¤ inventory_start ¤¤
<form class="dark"
      onSubmit="JavaScript:startInventory(event)">
  <button name="start">
    Start inventory
  </button>
</form>

¤¤ inventory_do ¤¤
<div id="inventory-overview"
     class="dark">
  <span class="label">
    Start date:
  </span>
  ¤start_date¤
  <br/>
  <span class="label">
    Total number of products:
  </span>
  ¤total_count¤
  <br/>
  <span class="label">
    Number of registered products:
  </span>
  <span id="seen_count">
    ¤seen_count¤
  </span>
  <form class="dark ¤hide¤"
        onSubmit="JavaScript:endInventory(event)">
    <button name="end">
      End inventory
    </button>
  </form>
</div>
<form id="inventory-register"
      class="light ¤hide¤"
      onSubmit="JavaScript:inventoryProduct(event)">
  <label for="serial">
    Product:
  </label>
  <input type="text"
         name="serial"
         id="serial"
         placeholder="Serial number" />
  <button>
    Register
  </button>
</form>
<div id="unseen-products">
  <h2>¤unseen_title¤</h2>
  ¤unseen¤
</div>
<div id="seen-products">
  <h2>Registered products</h2>
  ¤seen¤
</div>

¤¤ return_page ¤¤
<form class="dark"
      onSubmit="JavaScript:returnProduct(event)">
  <label for="serial">
    Product:
  </label>
  <input type="text"
         name="serial"
         id="serial"
         placeholder="Serial number"
         required />
  <button>
    Return
  </button>
</form>

¤¤ inventory_table ¤¤
<table id="inventory-history">
  <thead>
    <tr>
      <th>
      </th>
      <th>
        ¤item¤
      </th>
      <th>
        Start date
      </th>
      <th>
        End date
      </th>
      <th>
        Registered products
      </th>
      <th>
        Missing products
      </th>
    </tr>
  </thead>
  <tbody class="single">
    ¤rows¤
  </tbody>
</table>

¤¤ inventory_row ¤¤
<tr>
  <td>
  </td>
  <td>
    ¤item_link¤
  </td>
  <td>
    ¤start_date¤
  </td>
  <td>
    ¤end_date¤
  </td>
  <td>
    ¤num_seen¤
  </td>
  <td>
    ¤num_unseen¤
  </td>
</tr>

¤¤ search_form ¤¤
<form onSubmit="JavaScript:doSearch(event)"
      id="search"
      class="dark">
  <p>
    <label for="q">Search term:</label>
    <input type="hidden"
           name="page"
           value="search" />
    <input type="text"
           onKeyPress="JavaScript:searchInput(event)"
           name="q"
           id="q"
           placeholder="What are you looking for?"
           value=""
           autofocus />
    <button type="submit">
      Search
    </button>
  </p>
  <div id="terms">
    ¤terms¤
  </div>
  <div class="clear"></div>
</form>
<p id="hints">
  Advanced searches are possible by prefixing a search term with a keyword ending with a colon, for example: <strong>serial:123456</strong> or <strong>tag:computer</strong>
</p>
<div id="found-products"
     class="¤hidden¤">
  <h2>Products</h2>
  ¤product_results¤
</div>
<div id="found-users"
     class="¤hidden¤">
  <h2>Users</h2>
  ¤user_results¤
</div>

¤¤ search_term ¤¤

<p class="left">
  <span class="term">
    <input type="hidden"
           name="¤key¤"
           value="¤value¤" />
    ¤term¤
    <a class="termremove"
       onClick="JavaScript:removeTerm(event)">
      x
    </a>
  </span>
</p>