¤¤ 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>
        Namn
      </th>
      <th>
        Användarnamn
      </th>
      <th>
        Lån
      </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¤">
      Nytt lån
    </button>
  </td>
</tr>

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

¤¤ product_table ¤¤
<table>
  <thead>
    <tr>
      <th class="status">
      </th>
      <th>
        Namn
      </th>
      <th>
        Serienummer
      </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>Mallar</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="Namn" />
    <button>
      Ladda
    </button>
    <button onClick="JavaScript:saveTemplate(event)">
      Spara
    </button>
    <button onClick="JavaScript:deleteTemplate(event)">
      Ta bort
    </button>
  </form>
</div>

¤¤ product_details ¤¤
<div id="product-details">
  <h2>Artikeldata</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">
              Spara
            </button>
            <button id="reset"
                    class="right">
              Återställ
            </button>
          </td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>
            Namn:
          </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>
            Tillverkare:
          </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>
            Fakturanummer:
          </td>
          <td>
            <input type="text"
                   name="invoice"
                   value="¤invoice¤" />
          </td>
        </tr>
        <tr id="before_info">
          <td>
            Serienummer:
          </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="Nytt fält" />
            <button class="minibutton"
                    onClick="addField(event)">
              +
            </button>
          </td>
          <td>
          </td>
        </tr>
        <tr>
          <td>
            Taggar:
          </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="Ny tagg" />
            <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)">
      Skrota artikel
    </button>
    <button onClick="JavaScript:toggleService(event)">
      ¤service¤
    </button>
  </form>
</div>
<div id="product-attachments"
     class="¤hidden¤">
  <h2>Bilagor</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="Välj en fil..."
           onclick="selectFile(event)"
           readonly />
    <button>Ladda upp</button>
  </form>
</div>

¤¤ product_details_readonly ¤¤
<div id="product-details">
  <h2>Artikeldata</h2>
  <div id="product-data"
       class="data">
    <table>
      <tbody class="single fixedwidth">
        <tr>
          <td>
            Namn:
          </td>
          <td>
            ¤name¤
          </td>
        </tr>
        <tr>
          <td>
            Tillverkare:
          </td>
          <td>
            ¤brand¤
          </td>
        </tr>
        <tr>
          <td>
            Fakturanummer:
          </td>
          <td>
            ¤invoice¤
          </td>
        </tr>
        <tr id="before_info">
          <td>
            Serienummer:
          </td>
          <td>
            ¤serial¤
          </td>
        </tr>
        ¤info¤
        <tr>
          <td>
            Taggar:
          </td>
          <td id="tags">
            ¤tags¤
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div id="product-attachments"
     class="¤hidden¤">
  <h2>Bilagor</h2>
  ¤attachments¤
</div>

¤¤ product_details_public ¤¤
<div id="product-details">
  <h2>Artikeldata</h2>
  <div id="product-data"
       class="data">
    <table>
      <tbody class="single fixedwidth">
        <tr>
          <td>
            Namn:
          </td>
          <td>
            ¤name¤
          </td>
        </tr>
        <tr>
          <td>
            Tillverkare:
          </td>
          <td>
            ¤brand¤
          </td>
        </tr>
        <tr id="before_info">
          <td>
            Serienummer:
          </td>
          <td>
            ¤serial¤
          </td>
        </tr>
        ¤info¤
        <tr>
          <td>
            Taggar:
          </td>
          <td id="tags">
            ¤tags¤
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

¤¤ product_meta ¤¤
<div id="product-history">
  <h2>Artikelhistorik</h2>
  ¤history¤
</div>
<div id="product-label"
     class="¤label_hidden¤">
  <h2>Etikett</h2>
  ¤label¤
</div>
<div id="product-direct-checkout" class="¤checkout_hidden¤">
  <h2>Låna ut</h2>
  <form class="light"
        onSubmit="JavaScript:checkoutProduct(event)">
    <datalist id="user_suggest"></datalist>
    <input type="hidden"
           name="page"
           value="checkout" />
    <label for="user">Användarnamn:</label>
    <input onFocus="JavaScript:suggest(this, 'user')"
           type="text"
           name="user"
           list="user_suggest"
           autocomplete="off"
           placeholder="Användarnamn"
           required />
    <input type="hidden"
           id="product"
           name="product"
           value="¤serial¤" />
    <button>
      Låna ut
    </button>
    <br/>
    <label>Löptid:</label>
    <button onClick="JavaScript:loanLength(event, 7, 'day')">1 vecka</button>
    <button onClick="JavaScript:loanLength(event, 1, 'year')">1 år</button>
    <button onClick="JavaScript:loanLength(event, 3, 'year')">3 år</button>
    <br/>
    <label for="end">Slutdatum:</label>
    <input type="text"
           id="end"
           onClick="JavaScript:calendar(event)"
           name="end"
           value="¤end¤" />
  </form>
</div>

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

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

¤¤ product_label ¤¤
<div class="qr">
  <a href="./?page=print&id=¤id¤"
     title="Skriv ut">
    <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 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">
              Spara
            </button>
            <button class="right"
                    id="reset">
              Återställ
            </button>
          </td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>
            Namn:
          </td>
          <td>
          <input type="text"
                 value="¤displayname¤"
                 disabled />
          </td>
        </tr>
        <tr>
          <td>
            Användarnamn:
          </td>
          <td>
            <input type="text"
                   name="name"
                   value="¤name¤" />
          </td>
        </tr>
        <tr>
          <td>
            Anteckningar:
          </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¤">
      Nytt lån
    </button>
  </form>
</div>
<div id="active-loans">
  <h2>Aktuella lån</h2>
  ¤active_loans¤
</div>
<div id="inactive-loans">
  <h2>Gamla lån</h2>
  ¤inactive_loans¤
</div>

¤¤ user_loan_table ¤¤
<table class="history">
  <thead>
    <tr>
      <th class="status">
      </th>
      <th>
        Artikel
      </th>
      <th>
        Serienummer
      </th>
      <th>
        Startdatum
      </th>
      <th>
        Slutdatum
      </th>
      <th>
        Övrigt
      </th>
    </tr>
  </thead>
  <tbody class="single">
    ¤rows¤
  </tbody>
</table>

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

¤¤ product_loan_table ¤¤
<table class="history">
  <thead>
    <tr>
      <th class="status">
      </th>
      <th>
        Låntagare
      </th>
      <th>
        Startdatum
      </th>
      <th>
        Slutdatum
      </th>
      <th>
        Övrigt
      </th>
    </tr>
  </thead>
  <tbody class="single">
    ¤rows¤
  </tbody>
</table>

¤¤ product_loan_table_row ¤¤
<tr>
  <td class="status ¤status¤">
  </td>
  <td>
    ¤name¤
  </td>
  <td>
    ¤start_date¤
  </td>
  <td>
    ¤end_date¤
  </td>
  <td>
    ¤note¤
  </td>
</tr>

¤¤ public_user_details ¤¤
<div id="public-message" class="¤hidden¤">
  ¤message¤
</div>
<div id="active-loans">
  <h2>Aktuella lån</h2>
  ¤active_loans¤
</div>
<div id="inactive-loans">
  <h2>Gamla lån</h2>
  ¤inactive_loans¤
</div>

¤¤ public_loan_table ¤¤
<table class="history">
  <thead>
    <tr>
      <th class="status">
      </th>
      <th>
        Artikel
      </th>
      <th>
        Serienummer
      </th>
      <th>
        Startdatum
      </th>
      <th>
        Slutdatum
      </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)">
  Förläng
</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>
    Spara
  </button>
</form>


¤¤ checkout_page ¤¤
<div id="user-select">
  <h2>Välj låntagare</h2>
  <form class="dark"
        action="./"
        method="GET">
    <datalist id="user_suggest"></datalist>
    <input type="hidden"
           name="page"
           value="checkout" />
    <div>
      <label for="user">
        Användarnamn:
      </label>
      <input onFocus="JavaScript:suggest(this, 'user')"
             type="text"
             name="user"
             id="user"
             list="user_suggest"
             autocomplete="off"
             placeholder="Användarnamn"
             value="¤user¤" />
      <button type="submit" >
        Välj
      </button>
    </div>
    <div>
      <label for="email">
        E-post:
      </label>
      <input type="text"
             name="email"
             id="email"
             autocomplete="off"
             placeholder="E-post"
             value="¤email¤" />
    </div>
    <div>
      <label for="displayname">
        Namn:
      </label>
      <input type="text"
             name="displayname"
             id="displayname"
             value="¤displayname¤"
             disabled />
    </div>
    <div>
      <label for="notes">
        Anteckningar:
      </label>
      <textarea name="notes"
                id="notes"
                disabled>¤notes¤</textarea>
    </div>
  </form>
</div>
<div id="product-checkout">
  <h2>Låna ut artikel</h2>
  <form class="light"
        onSubmit="JavaScript:checkoutProduct(event)">
    <input type="hidden"
           name="page"
           value="checkout" />
    <input type="hidden"
           name="user"
           value="¤user¤">
    <label for="product">Artikel:</label>
    <input type="text"
           id="product"
           name="product"
           placeholder="Serienummer"
           required
           ¤disabled¤ />
    <button>
      Låna ut
    </button>
    <br/>
    <label>Löptid:</label>
    <button onClick="JavaScript:loanLength(event, 7, 'day')">1 vecka</button>
    <button onClick="JavaScript:loanLength(event, 1, 'year')">1 år</button>
    <button onClick="JavaScript:loanLength(event, 3, 'year')">3 år</button>
    <br/>
    <label for="end">Slutdatum:</label>
    <input type="text"
           id="end"
           onClick="JavaScript:calendar(event)"
           name="end"
           value="¤end¤"
           ¤disabled¤ />
  </form>
  ¤subtitle¤
  ¤loan_table¤
</div>

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

¤¤ inventory_do ¤¤

<div id="inventory-overview"
     class="dark">
  <span class="label">
    Startdatum:
  </span>
  ¤start_date¤
  <br/>
  <span class="label">
    Totalt antal artiklar:
  </span>
  ¤total_count¤
  <br/>
  <span class="label">
    Inventerade artiklar:
  </span>
  <span id="seen_count">
    ¤seen_count¤
  </span>
  <form class="dark ¤hide¤"
        onSubmit="JavaScript:endInventory(event)">
    <button name="end">
      Avsluta inventering
    </button>
  </form>
</div>
<form id="inventory-register"
      class="light ¤hide¤"
      onSubmit="JavaScript:inventoryProduct(event)">
  <label for="serial">
    Artikel:
  </label>
  <input type="text"
         name="serial"
         id="serial"
         placeholder="Serienummer" />
  <button>
    Registrera
  </button>
</form>
<div id="unseen-products">
  <h2>¤unseen_title¤</h2>
  ¤unseen¤
</div>
<div id="seen-products">
  <h2>Inventerade artiklar</h2>
  ¤seen¤
</div>

¤¤ return_page ¤¤
<form class="dark"
      onSubmit="JavaScript:returnProduct(event)">
  <label for="serial">
    Artikel:
  </label>
  <input type="text"
         name="serial"
         id="serial"
         placeholder="Serienummer"
         required />
  <button>
    Lämna tillbaka
  </button>
</form>

¤¤ inventory_table ¤¤
<table id="inventory-history">
  <thead>
    <tr>
      <th>
      </th>
      <th>
        ¤item¤
      </th>
      <th>
        Startdatum
      </th>
      <th>
        Slutdatum
      </th>
      <th>
        Inventerade artiklar
      </th>
      <th>
        Saknade artiklar
      </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">Sökterm:</label>
    <input type="hidden"
           name="page"
           value="search" />
    <input type="text"
           onKeyPress="JavaScript:searchInput(event)"
           name="q"
           id="q"
           placeholder="Vad letar du efter?"
           value=""
           autofocus />
    <button type="submit">
      Sök
    </button>
  </p>
  <div id="terms">
    ¤terms¤
  </div>
  <div class="clear"></div>
</form>
<p id="hints">
  Du kan göra mer avancerade sökningar genom att börja med ett nyckelord avslutat med kolon, ex: <strong>serienummer:123456</strong> eller <strong>tag:dator</strong>
</p>
<div id="found-products"
     class="¤hidden¤">
  <h2>Artiklar</h2>
  ¤product_results¤
</div>
<div id="found-users"
     class="¤hidden¤">
  <h2>Användare</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>