<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">
<h1>Suppliers</h1>
<div class="action-bar">
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#add" />
</svg>
<span>Add new supplier</span>
</span>
</button>
</div>
<div class="wc-grid">
<div class="wc-grid-item ">
<h2>Vinunic</h2>
<dl class="dl-grid">
<dt>E-mail:</dt>
<dd><a href="mailto:sales@vinunic.se">sales@vinunic.se</a></dd>
<dt>Web:</dt>
<dd><a href="https://vinunic.se">https://vinunic.se</a></dd>
<dt>Contact:</dt>
<dd>Annica Bondelid</dd>
<dt>Phone:</dt>
<dd>
<a href="tel:+46 8-660 84 15">+46 8-660 84 15</a>
</dd>
</dl>
<p>
<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>
Supplier wines in cellar
</a>
</p>
<div class="action-bar">
<button type="button" class="alt">
<span>
<span>Edit</span>
</span>
</button>
</div>
</div>
<div class="wc-grid-item ">
<h2>Spring Wine</h2>
<dl class="dl-grid">
<dt>E-mail:</dt>
<dd><a href="mailto:order@springwine.se">order@springwine.se</a></dd>
<dt>Web:</dt>
<dd><a href="https://springwine.se">https://springwine.se</a></dd>
<dt>Contact:</dt>
<dd>Markus Eriksson</dd>
<dt>Phone:</dt>
<dd>
<a href="tel:+46 8-672 77 00">+46 8-672 77 00</a>
</dd>
</dl>
<p>
<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>
Supplier wines in cellar
</a>
</p>
<div class="action-bar">
<button type="button" class="alt">
<span>
<span>Edit</span>
</span>
</button>
</div>
</div>
<div class="wc-grid-item ">
<h2>Johan Lidby</h2>
<dl class="dl-grid">
<dt>E-mail:</dt>
<dd><a href="mailto:sales@johanlidbyvinhandel.se">sales@johanlidbyvinhandel.se</a></dd>
<dt>Web:</dt>
<dd><a href="https://johanlidbyvinhandel.se">https://johanlidbyvinhandel.se</a></dd>
<dt>Contact:</dt>
<dd>Johan Lidby</dd>
<dt>Phone:</dt>
<dd>
<a href="tel:+46 8-792 03 50">+46 8-792 03 50</a>
</dd>
</dl>
<p>
<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>
Supplier wines in cellar
</a>
</p>
<div class="action-bar">
<button type="button" class="alt">
<span>
<span>Edit</span>
</span>
</button>
</div>
</div>
<div class="wc-grid-item edit-mode">
<h2><em>adding:</em> Vinunic</h2>
<div class="form-item ">
<label for="86fcdf37-33d0-1acf-43ed-33bfc7682187">
Name
</label>
<input type="text" id="86fcdf37-33d0-1acf-43ed-33bfc7682187" value="Vinunic">
</div>
<div class="form-item ">
<label for="cc3b5860-b477-35e8-1d84-8c03f0154bd8">
E-mail
</label>
<input type="text" id="cc3b5860-b477-35e8-1d84-8c03f0154bd8" value="sales@vinunic.se">
</div>
<div class="form-item ">
<label for="4aa5ce28-d087-fc3a-1058-c10722db3149">
Contact
</label>
<input type="text" id="4aa5ce28-d087-fc3a-1058-c10722db3149" value="Annica Bondelid">
</div>
<div class="form-item ">
<label for="36a5e435-cf98-7d46-4c5e-cf234ac57fc6">
Phone
</label>
<input type="text" id="36a5e435-cf98-7d46-4c5e-cf234ac57fc6" value="+46 8-660 84 15">
</div>
<div class="action-bar">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
<span>Delete supplier</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Save</span>
</span>
</button>
</div>
</div>
</div>
<div class="action-bar">
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#add" />
</svg>
<span>Add new supplier</span>
</span>
</button>
</div>
</main>
</div>
{{#> @regular-page}}
<h1>Suppliers</h1>
{{#> @action-bar new-supplier}}
{{> @button}}
{{/ @action-bar}}
{{#> @wc-grid}}
{{!-- Regular suppliers --}}
{{#each suppliers}}
{{#> @wc-grid-item}}
<h2>{{name}}</h2>
<dl class="dl-grid">
<dt>E-mail:</dt>
<dd><a href="mailto:{{email}}">{{email}}</a></dd>
<dt>Web:</dt>
<dd><a href="{{website}}">{{website}}</a></dd>
<dt>Contact:</dt>
<dd>{{contact}}</dd>
<dt>Phone:</dt>
<dd>
<a href="tel:{{phone}}">{{phone}}</a>
</dd>
</dl>
<p>
<a href="{{ path '/components/preview/my-wine-cellar' }}">
{{> @svg icon="view-list"}}
Supplier wines in cellar
</a>
</p>
{{#> @action-bar ../edit}}
{{> @button}}
{{/ @action-bar}}
{{/ @wc-grid-item}}
{{/each}}
{{!-- Edit/add supplier mode --}}
{{#> @wc-grid-item edit-supplier}}
<h2><em>adding:</em> {{name.value}}</h2>
{{> @form-item-input name id=(random)}}
{{> @form-item-input email id=(random)}}
{{> @form-item-input contact id=(random)}}
{{> @form-item-input phone id=(random)}}
{{#> @action-bar}}
{{> @button delete}}
{{> @button save}}
{{/ @action-bar}}
{{/ @wc-grid-item}}
{{/ @wc-grid}}
{{#> @action-bar new-supplier}}
{{> @button}}
{{/ @action-bar}}
{{/ @regular-page}}
{
"new-supplier": {
"text": "Add new supplier",
"icon": "add"
},
"edit": {
"text": "Edit",
"modifier": "alt"
},
"suppliers": [
{
"name": "Vinunic",
"email": "sales@vinunic.se",
"website": "https://vinunic.se",
"contact": "Annica Bondelid",
"phone": "+46 8-660 84 15"
},
{
"name": "Spring Wine",
"email": "order@springwine.se",
"website": "https://springwine.se",
"contact": "Markus Eriksson",
"phone": "+46 8-672 77 00"
},
{
"name": "Johan Lidby",
"email": "sales@johanlidbyvinhandel.se",
"website": "https://johanlidbyvinhandel.se",
"contact": "Johan Lidby",
"phone": "+46 8-792 03 50"
}
],
"edit-supplier": {
"modifier": "edit-mode",
"name": {
"label": "Name",
"value": "Vinunic"
},
"email": {
"label": "E-mail",
"value": "sales@vinunic.se"
},
"contact": {
"label": "Contact",
"value": "Annica Bondelid"
},
"phone": {
"label": "Phone",
"value": "+46 8-660 84 15"
},
"delete": {
"text": "Delete supplier",
"icon": "delete",
"modifier": "alt"
},
"save": {
"text": "Save",
"icon": "save"
}
}
}
No notes defined.