<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>Good Eats Inc.</h1>
<article>
<h2>Company information</h2>
<dl class="dl-grid">
<dt>Company name</dt>
<dd>Good Eats Inc.</dd>
<dt>Restaurant name</dt>
<dd>The Eatery</dd>
<dt>Company VAT number</dt>
<dd>SE999999999901</dd>
</dl>
<h2>Contact information</h2>
<dl class="dl-grid">
<dt>Work title of admin</dt>
<dd>Restaurant manager</dd>
<dt>First name</dt>
<dd>John</dd>
<dt>Last name</dt>
<dd>Smith</dd>
<dt>E-mail address</dt>
<dd>user@domain.com</dd>
<dt>Phone number</dt>
<dd>+46777101010</dd>
</dl>
<h2>Account information</h2>
<dl class="dl-grid">
<dt>Registered date</dt>
<dd>2019-06-05</dd>
<dt>Number of users</dt>
<dd>19</dd>
<dt>Sommeliers</dt>
<dd>5</dd>
<dt>Economy</dt>
<dd>2</dd>
<dt>Waiters</dt>
<dd>12</dd>
</dl>
<div class="inline">
<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 customer account</span>
</span>
</button>
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#login" />
</svg>
<span>Log in as customer</span>
</span>
</button>
</div>
</article>
<h2>Customer support issues</h2>
<div class="tabbed">
<ul class="flat-list">
<li>
<a href="#section-0">
<span>Open issues</span>
</a>
</li>
<li>
<a href="#section-1">
<span>Archived issues</span>
</a>
</li>
</ul>
<section id="section-1">
<div class="card ">
<div class="scrollable-table">
<table class="issues-table">
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Date</th>
<th scope="col">Information</th>
<th scope="col">Assigned to</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#validate" />
</svg>
New wine validation</td>
<td class="one-line">2019-07-03 15:46</td>
<td class="info">
<p><a href="#">First Hotel Billingehus</a> has uploaded a new wine in need of validation. <a href="#notification-1" class="toggle" aria-controls="#notification-1" data-toggle-alt="Show less">Show more…</a></p>
<div id="notification-1" class="toggle-content">
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
<p>Dolor odio facere tempore perferendis possimus? Exercitationem
inventore id magni explicabo tenetur Ea et quibusdam molestiae
pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid
deleniti nisi Sint explicabo hic</p>
</div>
</td>
<td class="one-line">
<a href="mailto:jerker@finewineclub.com" data-tippy-content="jerker@finewineclub.com">Jerker Soomus</a>
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#money" />
</svg>
Price change</td>
<td class="one-line">2019-07-04 10:18</td>
<td class="info"><a href="#">Bertrand Ambroise Corton Rognet 2007</a> has increased in price with 25%.
</td>
<td class="one-line">
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
<tr>
<td class="one-line"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#support" />
</svg>
Support request</td>
<td class="one-line">2019-07-04 18:33</td>
<td class="info"><a href="#">Stureplan</a> has requested help with wine matching.
</td>
<td class="one-line">
<a href="mailto:ralf@finewineclub.com" data-tippy-content="ralf@finewineclub.com">Ralf Nord</a>
</td>
<td>
<div class="action-bar">
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inbox" />
</svg>
<span>Pick task</span>
</span>
</button>
<button type="button" class="alt size-xs">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#archive" />
</svg>
<span>Archive</span>
</span>
</button>
<button type="button" class="alt size-xs" aria-label="Delete">
<span>
<svg class="icon alt size-xs" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="section-2">
<div class="card ">
<p>Archived issues will be displayed here.</p>
</div>
</section>
</div>
</main>
</div>
{{#> @regular-page}}
<h1>{{main-heading}}</h1>
{{#> @article}}
<h2>{{company-info.heading}}</h2>
<dl class="dl-grid">
{{#each company-info.inputs}}
<dt>{{label}}</dt>
<dd>{{value}}</dd>
{{/each}}
</dl>
<h2>{{contact-info.heading}}</h2>
<dl class="dl-grid">
{{#each contact-info.inputs}}
<dt>{{label}}</dt>
<dd>{{value}}</dd>
{{/each}}
</dl>
<h2>{{account-info.heading}}</h2>
<dl class="dl-grid">
{{#each account-info.items}}
<dt>{{label}}</dt>
<dd>{{value}}</dd>
{{/each}}
</dl>
<div class="inline">
{{#each customer-actions.buttons}}
{{> @button}}
{{/each}}
</div>
{{/ @article}}
<h2>Customer support issues</h2>
{{#> @tab-interface support-issues}}
{{#> @tab-panel id="1"}}
{{#> @card issues}}
{{> @issues-table}}
{{/ @card}}
{{/ @tab-panel}}
{{#> @tab-panel id="2"}}
{{#> @card issues}}
<p>Archived issues will be displayed here.</p>
{{/ @card}}
{{/ @tab-panel}}
{{/ @tab-interface}}
{{/ @regular-page}}
{
"main-heading": "Good Eats Inc.",
"company-info": {
"heading": "Company information",
"inputs": [
{
"label": "Company name",
"value": "Good Eats Inc."
},
{
"label": "Restaurant name",
"value": "The Eatery",
"help-msg": "(if other than company name)"
},
{
"label": "Company VAT number",
"value": "SE999999999901"
}
]
},
"contact-info": {
"heading": "Contact information",
"inputs": [
{
"label": "Work title of admin",
"value": "Restaurant manager"
},
{
"label": "First name",
"value": "John"
},
{
"label": "Last name",
"value": "Smith"
},
{
"label": "E-mail address",
"type": "email",
"value": "user@domain.com"
},
{
"label": "Phone number",
"value": "+46777101010"
}
]
},
"account-info": {
"heading": "Account information",
"items": [
{
"label": "Registered date",
"value": "2019-06-05"
},
{
"label": "Number of users",
"value": 19
},
{
"label": "Sommeliers",
"value": 5
},
{
"label": "Economy",
"value": 2
},
{
"label": "Waiters",
"value": 12
}
]
},
"customer-actions": {
"heading": "Customer actions",
"buttons": [
{
"text": "Delete customer account",
"icon": "delete",
"modifier": "alt"
},
{
"text": "Log in as customer",
"icon": "login",
"modifier": "alt"
}
]
},
"support-issues": {
"tabs": [
{
"title": "Open issues"
},
{
"title": "Archived issues"
}
],
"issues": {
"issues-buttons": [
{
"text": "Pick task",
"icon": "inbox",
"modifier": "alt size-xs"
},
{
"text": "Archive",
"icon": "archive",
"modifier": "alt size-xs"
},
{
"text": "Delete",
"icon": "delete",
"icon-only": true,
"modifier": "alt size-xs"
}
],
"issues": [
{
"category": "New wine validation",
"icon": "validate",
"date": "2019-07-03 15:46",
"assignee": "Jerker Soomus",
"assignee-mail": "jerker@finewineclub.com",
"information": "<p><a href=\"#\">First Hotel Billingehus</a> has uploaded a new wine in need of validation. <a href=\"#notification-1\" class=\"toggle\" aria-controls=\"#notification-1\" data-toggle-alt=\"Show less\">Show more…</a></p> <div id=\"notification-1\" class=\"toggle-content\">\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n <p>Dolor odio facere tempore perferendis possimus? Exercitationem\n inventore id magni explicabo tenetur Ea et quibusdam molestiae\n pariatur rerum corrupti elit iusto Ratione tenetur ea aliquid\n deleniti nisi Sint explicabo hic</p>\n</div>\n"
},
{
"category": "Price change",
"icon": "money",
"date": "2019-07-04 10:18",
"information": "<a href=\"#\">Bertrand Ambroise Corton Rognet 2007</a> has increased in price with 25%.\n"
},
{
"category": "Support request",
"icon": "support",
"date": "2019-07-04 18:33",
"assignee": "Ralf Nord",
"assignee-mail": "ralf@finewineclub.com",
"information": "<a href=\"#\">Stureplan</a> has requested help with wine matching.\n"
}
]
}
}
}
No notes defined.