<div id="layout">
<input type="checkbox" id="menu-trigger">
<div id="off-screen-menu">
<nav id="main-nav">
<ul class="flat-list">
<li>
<a href="../preview/dashboard.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dashboard" />
</svg>
Dashboard
</a>
</li>
<li>
<a href="../preview/account-settings.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#settings" />
</svg>
Account settings
</a>
</li>
<li>
<a href="../preview/suppliers.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#package" />
</svg>
Suppliers
</a>
</li>
<li>
<a href="../preview/new-wine.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#upload" />
</svg>
Add wines
</a>
</li>
<li>
<a href="../preview/my-wine-cellar.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#view-list" />
</svg>
My wine cellar
</a>
</li>
<li>
<a href="../preview/wine-cellar-inventory.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inventory" />
</svg>
Wine cellar inventory
</a>
</li>
<li>
<a href="../preview/add-dishes.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dish" />
</svg>
Dishes
</a>
</li>
<li>
<a href="../preview/orders.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-check" />
</svg>
Orders
</a>
</li>
<li>
<a href="../preview/digital-sommelier.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#sommelier" />
</svg>
Digital Sommelier
</a>
</li>
<li>
<a href="../preview/login.html" class="logout">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logout" />
</svg>
Log out
</a>
</li>
</ul>
</nav>
<div class="lang-selector">
<label for="lang-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-gb" />
</svg>
English
</label>
<input type="checkbox" id="lang-trigger">
<ul class="flat-list lang-list">
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-se" />
</svg>
Svenska
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-no" />
</svg>
Norsk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-dk" />
</svg>
Dansk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-de" />
</svg>
Deutsch
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-fr" />
</svg>
Français
</a>
</li>
</ul>
</div>
</div>
<header id="header">
<div class="header-content">
<p class="main-title">
<a href="../preview/dashboard.html" class="block-link"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logo-badge" />
</svg>
Fine Wine Club</a>
</p>
</div>
<div class="header-content">
<div class="shopping-list-wrapper">
<label for="shopping-list-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-list" />
</svg>
<span class="trigger-label">Shopping list</span>
<span class="list-counter">3</span>
</label>
<input id="shopping-list-trigger" type="checkbox">
<div class="shopping-list">
<form action="#" method="post">
<div class="shopping-list-content">
<table class="shopping-list-table">
<thead>
<tr>
<th scope="col">Producer</th>
<th scope="col">Wine</th>
<th scope="col">Vintage</th>
<th scope="col"><span class="at-only">Remove</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Chateu Pontet-Canet</td>
<td>Chateu Pontet-Canet</td>
<td>2010</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Aalto</td>
<td>PS</td>
<td>2015</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Roederer</td>
<td>Cristal</td>
<td>2009</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="submit-area ">
<button type="button" data-prototype-url="../preview/orders.html">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-add" />
</svg>
<span>Create purchase orders</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<label for="menu-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#menu" />
</svg>
Menu
</label>
</div>
</header>
<main id="main-content">
<article class="article-wide">
<h1>Order statuses</h1>
<ul class="order-statuses flat-list">
<li class="status-item card">
<h2 class="status-item-supplier">Vinunic (sales@vinunic.se)</h2>
<div class="status-item-wines">
<table>
<thead>
<tr>
<th scope="col">Wines</th>
<th scope="col" class="num">Bottles</th>
<th scope="col" class="num">Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Chateu Pontet-Canet Chateu Pontet-Canet 2008 <em>(75 cl)</em>
</td>
<td class="num">
<label for="246c7321-99da-d90c-d941-535d40e93f57" class="at-only">
Bottles
</label>
<input type="number" id="246c7321-99da-d90c-d941-535d40e93f57" value="10">
</td>
<td class="num">
<label for="1aac7a2e-3f5e-aff0-b785-2b30c370c890" class="at-only">
Unit price
</label>
<input type="number" id="1aac7a2e-3f5e-aff0-b785-2b30c370c890" value="550">
</td>
</tr>
<tr>
<td>
Chateu Pontet-Canet Chateu Pontet-Canet 2010 <em>(75 cl)</em>
</td>
<td class="num">
<label for="dade1a62-daf5-c0de-e47f-55c5fae21cb4" class="at-only">
Bottles
</label>
<input type="number" id="dade1a62-daf5-c0de-e47f-55c5fae21cb4" value="18">
</td>
<td class="num">
<label for="d5af9d54-89d8-71c2-437e-1164a0943b21" class="at-only">
Unit price
</label>
<input type="number" id="d5af9d54-89d8-71c2-437e-1164a0943b21" value="500">
</td>
</tr>
<tr>
<td>
Chateu Pontet-Canet Chateu Pontet-Canet 2011 <em>(75 cl)</em>
</td>
<td class="num">
<label for="505709bc-bdb3-0c49-b83b-4fa4a5e0f1f9" class="at-only">
Bottles
</label>
<input type="number" id="505709bc-bdb3-0c49-b83b-4fa4a5e0f1f9" value="20">
</td>
<td class="num">
<label for="eaf3f2df-e556-c46c-2962-5da0e6dac409" class="at-only">
Unit price
</label>
<input type="number" id="eaf3f2df-e556-c46c-2962-5da0e6dac409" value="480">
</td>
</tr>
</tbody>
</table>
</div>
<p class="status-item-order-total">
<strong>Order total:</strong>
<span>24100</span>
</p>
<p class="status-item-order-date">
<strong>Order date:</strong>
<span>2019-06-01</span>
</p>
<p class="status-item-delivery-date">
<strong>Delivery date:</strong>
<span>2019-06-08</span>
</p>
<p class="status-item-status">
<strong>Status:</strong>
<span><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#pending" />
</svg>
Pending</span>
</p>
<div class="status-item-actions">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#cancel" />
</svg>
<span>Cancel</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-created" />
</svg>
<span>Send order</span>
</span>
</button>
</div>
</li>
<li class="status-item card">
<h2 class="status-item-supplier">Spring Wine (order@springwine.se)</h2>
<div class="status-item-wines">
<table>
<thead>
<tr>
<th scope="col">Wines</th>
<th scope="col" class="num">Bottles</th>
<th scope="col" class="num">Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Aalto PS 2015 <em>(75 cl)</em>
</td>
<td class="num">
36
</td>
<td class="num">
1000
</td>
</tr>
</tbody>
</table>
</div>
<p class="status-item-order-total">
<strong>Order total:</strong>
<span>36000</span>
</p>
<p class="status-item-order-date">
<strong>Order date:</strong>
<span>2019-06-02</span>
</p>
<p class="status-item-delivery-date">
<strong>Delivery date:</strong>
<span>2019-06-09</span>
</p>
<p class="status-item-status">
<strong>Status:</strong>
<span><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-sent" />
</svg>
Sent to supplier</span>
</p>
<div class="status-item-actions">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#cancel" />
</svg>
<span>Cancel</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-invoice-received" />
</svg>
<span>Order confirmed</span>
</span>
</button>
</div>
</li>
<li class="status-item card">
<h2 class="status-item-supplier">Johan Lidby (sales@johanlidby.se)</h2>
<div class="status-item-wines">
<table>
<thead>
<tr>
<th scope="col">Wines</th>
<th scope="col" class="num">Bottles</th>
<th scope="col" class="num">Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Roederer Cristal 2009 <em>(75 cl)</em>
</td>
<td class="num">
24
</td>
<td class="num">
1200
</td>
</tr>
</tbody>
</table>
</div>
<p class="status-item-order-total">
<strong>Order total:</strong>
<span>28800</span>
</p>
<p class="status-item-order-date">
<strong>Order date:</strong>
<span>2019-06-03</span>
</p>
<p class="status-item-delivery-date">
<strong>Delivery date:</strong>
<span>2019-06-10</span>
</p>
<p class="status-item-status">
<strong>Status:</strong>
<span><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-invoice-received" />
</svg>
Order confirmed by supplier</span>
</p>
<div class="status-item-actions">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#cancel" />
</svg>
<span>Cancel</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-invoice-certified" />
</svg>
<span>Invoice confirmed</span>
</span>
</button>
</div>
</li>
<li class="status-item card">
<h2 class="status-item-supplier">Johan Lidby (sales@johanlidby.se)</h2>
<div class="status-item-wines">
<table>
<thead>
<tr>
<th scope="col">Wines</th>
<th scope="col" class="num">Bottles</th>
<th scope="col" class="num">Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Roederer Cristal 2009 <em>(75 cl)</em>
</td>
<td class="num">
24
</td>
<td class="num">
1200
</td>
</tr>
</tbody>
</table>
</div>
<p class="status-item-order-total">
<strong>Order total:</strong>
<span>28800</span>
</p>
<p class="status-item-order-date">
<strong>Order date:</strong>
<span>2019-06-03</span>
</p>
<p class="status-item-delivery-date">
<strong>Delivery date:</strong>
<span>2019-06-10</span>
</p>
<p class="status-item-status">
<strong>Status:</strong>
<span><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-invoice-certified" />
</svg>
Invoice confirmed</span>
</p>
<div class="status-item-actions">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#cancel" />
</svg>
<span>Cancel</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-received" />
</svg>
<span>Delivered and certified</span>
</span>
</button>
</div>
</li>
<li class="status-item card">
<h2 class="status-item-supplier">Johan Lidby (sales@johanlidby.se)</h2>
<div class="status-item-wines">
<table>
<thead>
<tr>
<th scope="col">Wines</th>
<th scope="col" class="num">Bottles</th>
<th scope="col" class="num">Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Roederer Cristal 2010 <em>(75 cl)</em>
<button type="button" class="alt size-xxs">
<span>
<svg class="icon alt size-xxs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#add" />
</svg>
<span>Add to wine cellar</span>
</span>
</button>
</td>
<td class="num">
24
</td>
<td class="num">
1200
</td>
</tr>
<tr>
<td>
Roederer Cristal 2009 <em>(75 cl)</em>
<button type="button" class="alt size-xxs">
<span>
<svg class="icon alt size-xxs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#add" />
</svg>
<span>Add to wine cellar</span>
</span>
</button>
</td>
<td class="num">
24
</td>
<td class="num">
1200
</td>
</tr>
<tr>
<td>
Roederer Cristal 2008 <em>(75 cl)</em>
<button type="button" class="alt size-xxs">
<span>
<svg class="icon alt size-xxs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#add" />
</svg>
<span>Add to wine cellar</span>
</span>
</button>
</td>
<td class="num">
24
</td>
<td class="num">
1200
</td>
</tr>
</tbody>
</table>
</div>
<p class="status-item-order-total">
<strong>Order total:</strong>
<span>86400</span>
</p>
<p class="status-item-order-date">
<strong>Order date:</strong>
<span>2019-06-03</span>
</p>
<p class="status-item-delivery-date">
<strong>Delivery date:</strong>
<span>2019-06-10</span>
</p>
<p class="status-item-status">
<strong>Status:</strong>
<span><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-received" />
</svg>
Delivery received and certified</span>
</p>
<div class="status-item-actions">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#cancel" />
</svg>
<span>Cancel</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#check" />
</svg>
<span>Added to inventory</span>
</span>
</button>
</div>
</li>
<li class="status-item card">
<h2 class="status-item-supplier">Johan Lidby (sales@johanlidby.se)</h2>
<div class="status-item-wines">
<table>
<thead>
<tr>
<th scope="col">Wines</th>
<th scope="col" class="num">Bottles</th>
<th scope="col" class="num">Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Roederer Cristal 2009 <em>(75 cl)</em>
</td>
<td class="num">
24
</td>
<td class="num">
1200
</td>
</tr>
</tbody>
</table>
</div>
<p class="status-item-order-total">
<strong>Order total:</strong>
<span>28800</span>
</p>
<p class="status-item-order-date">
<strong>Order date:</strong>
<span>2019-06-03</span>
</p>
<p class="status-item-delivery-date">
<strong>Delivery date:</strong>
<span>2019-06-10</span>
</p>
<p class="status-item-status">
<strong>Status:</strong>
<span><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#check" />
</svg>
Finalized</span>
</p>
<div class="status-item-actions">
</div>
</li>
<li class="status-item card">
<h2 class="status-item-supplier">Johan Lidby (sales@johanlidby.se)</h2>
<div class="status-item-wines">
<table>
<thead>
<tr>
<th scope="col">Wines</th>
<th scope="col" class="num">Bottles</th>
<th scope="col" class="num">Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Roederer Cristal 2009 <em>(75 cl)</em>
</td>
<td class="num">
24
</td>
<td class="num">
1200
</td>
</tr>
</tbody>
</table>
</div>
<p class="status-item-order-total">
<strong>Order total:</strong>
<span>28800</span>
</p>
<p class="status-item-order-date">
<strong>Order date:</strong>
<span>2019-06-03</span>
</p>
<p class="status-item-delivery-date">
<strong>Delivery date:</strong>
<span>2019-06-10</span>
</p>
<p class="status-item-status">
<strong>Status:</strong>
<span><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#order-annulled" />
</svg>
Annulled</span>
</p>
<div class="status-item-actions">
</div>
</li>
</ul>
</article>
</main>
</div>
{{#> @regular-page}}
{{#> @article--wide}}
<h1>Order statuses</h1>
{{render '@order-statuses-list'}}
{{/ @article--wide}}
{{/ @regular-page}}
/* No context defined. */
No notes defined.