<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>

            <h1>Review your uploaded wines</h1>

            <p>We found <strong>23 wines</strong> in your upload. We’ve matched
                <strong>20 wines</strong> but found <strong>3 wines</strong> that
                couldn’t be matched. Please review them below.
            </p>

        </article>

        <h2>Unmatched wines</h2>

        <form action="#" method="post">
            <div class="scrollable-table">
                <table class="matching-table">
                    <thead>
                        <tr>
                            <th scope="col">Uploaded name</th>
                            <th scope="col">Probable matches</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Torevillos Cabernet Sauvignon</td>
                            <td>
                                <ol class="flat-list possible-matches">
                                    <li>
                                        <label>
                                            <input type="radio" id="radio-0" name="match-group-1">
                                            2012 Abreu Cabernet Sauvignon Rico, Matteo &amp; Lucia Thorevilos
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" id="radio-1" name="match-group-1">
                                            2009 Abreu Cabernet Sauvignon Rico, Matteo &amp; Lucia Thorevilos
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" id="radio-2" name="match-group-1">
                                            2011 Abreu Cabernet Sauvignon Rico, Matteo &amp; Lucia Thorevilos
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" id="radio-3" name="match-group-1">
                                            None of the above
                                        </label>
                                    </li>
                                </ol>
                                <div class="simple-accordion">
                                    <div class="simple-accordion-item">
                                        <p class="simple-accordion-title">
                                            <span>Enter wine details manually</span>
                                            <svg class="icon " height="20" width="20" aria-hidden="true">
                                                <use xlink:href="../../sprite.svg#angle" />
                                            </svg>
                                        </p>
                                        <div class="collapsible-content">
                                            <div class="simple-accordion-inner-content">
                                                <div class="new-wine">

                                                    <div class="form-item ">
                                                        <label for="new-wine-producer-0">
                                                            Producer

                                                        </label>
                                                        <input type="text" id="new-wine-producer-0" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="1918e4ec-d35e-363a-df1b-d049bd5084ac">
                                                            Wine name

                                                        </label>
                                                        <input type="text" id="1918e4ec-d35e-363a-df1b-d049bd5084ac" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="new-wine-country-0">
                                                            Country

                                                        </label>
                                                        <input type="text" id="new-wine-country-0" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="new-wine-region-0">
                                                            Region

                                                        </label>
                                                        <input type="text" id="new-wine-region-0" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="new-wine-district-0">
                                                            District

                                                        </label>
                                                        <input type="text" id="new-wine-district-0" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="new-wine-vintage-0">
                                                            Vintage

                                                        </label>
                                                        <input type="text" id="new-wine-vintage-0" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="12c01649-5329-f325-c4b4-79f3105dfb1b">
                                                            Bottle size

                                                        </label>
                                                        <input type="text" id="12c01649-5329-f325-c4b4-79f3105dfb1b" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="3dd974fe-8cdf-0c40-8ecd-a7e6ca9ee6dd">
                                                            Bottles/case

                                                        </label>
                                                        <input type="text" id="3dd974fe-8cdf-0c40-8ecd-a7e6ca9ee6dd" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="6a01bfd5-0af2-e5bd-8456-334eb9fca441">
                                                            Bottles in wine cellar

                                                        </label>
                                                        <input type="text" id="6a01bfd5-0af2-e5bd-8456-334eb9fca441" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="8c622517-c919-e472-24cd-ff0234b14803">
                                                            Supplier

                                                        </label>
                                                        <input type="text" id="8c622517-c919-e472-24cd-ff0234b14803" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="99d38a9f-66e3-8c40-6f24-068cb441aa55">
                                                            Purchase Price per bottle(ex VAT)

                                                        </label>
                                                        <input type="text" id="99d38a9f-66e3-8c40-6f24-068cb441aa55" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="f9e96924-177a-1133-54b1-bddd70c86b99">
                                                            Price per bottle in winelist (ex VAT)

                                                        </label>
                                                        <input type="text" id="f9e96924-177a-1133-54b1-bddd70c86b99" value="">
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Roch de Chambes</td>
                            <td>
                                <ol class="flat-list possible-matches">
                                    <li>
                                        <label>
                                            <input type="radio" id="radio-0" name="match-group-2">
                                            Roc de Cambes
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="radio" id="radio-1" name="match-group-2">
                                            None of the above
                                        </label>
                                    </li>
                                </ol>
                                <div class="simple-accordion">
                                    <div class="simple-accordion-item">
                                        <p class="simple-accordion-title">
                                            <span>Enter wine details manually</span>
                                            <svg class="icon " height="20" width="20" aria-hidden="true">
                                                <use xlink:href="../../sprite.svg#angle" />
                                            </svg>
                                        </p>
                                        <div class="collapsible-content">
                                            <div class="simple-accordion-inner-content">
                                                <div class="new-wine">

                                                    <div class="form-item ">
                                                        <label for="345c5d12-93d7-e655-1be1-40a294064226">
                                                            Producer

                                                        </label>
                                                        <input type="text" id="345c5d12-93d7-e655-1be1-40a294064226" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="a9b4ac38-1eb1-2184-e194-b34441016af0">
                                                            Wine name

                                                        </label>
                                                        <input type="text" id="a9b4ac38-1eb1-2184-e194-b34441016af0" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="824fed5b-1923-0042-d906-c71878076da4">
                                                            Country

                                                        </label>
                                                        <input type="text" id="824fed5b-1923-0042-d906-c71878076da4" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="ae016a45-c76e-d42c-8d1b-54b2506a771a">
                                                            Region

                                                        </label>
                                                        <input type="text" id="ae016a45-c76e-d42c-8d1b-54b2506a771a" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="27bb405f-63a2-ee6e-3a31-052d205ee5f1">
                                                            District

                                                        </label>
                                                        <input type="text" id="27bb405f-63a2-ee6e-3a31-052d205ee5f1" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="5bb7f9e4-f8f2-0aae-a935-d1ee042b9ee0">
                                                            Vintage

                                                        </label>
                                                        <input type="text" id="5bb7f9e4-f8f2-0aae-a935-d1ee042b9ee0" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="5672825c-b1ec-5e64-b8d4-c160f83cbd3e">
                                                            Bottle size

                                                        </label>
                                                        <input type="text" id="5672825c-b1ec-5e64-b8d4-c160f83cbd3e" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="84b5fc24-67eb-5aad-9c15-69f909be1b77">
                                                            Bottles/case

                                                        </label>
                                                        <input type="text" id="84b5fc24-67eb-5aad-9c15-69f909be1b77" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="61b1e1a3-052a-7952-eaa7-b6fc418445ac">
                                                            Bottles in wine cellar

                                                        </label>
                                                        <input type="text" id="61b1e1a3-052a-7952-eaa7-b6fc418445ac" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="e238818f-030e-f836-3705-38e18a96f96f">
                                                            Supplier

                                                        </label>
                                                        <input type="text" id="e238818f-030e-f836-3705-38e18a96f96f" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="8140b65e-b6bc-76a6-c137-d71817dbb4e6">
                                                            Purchase Price per bottle(ex VAT)

                                                        </label>
                                                        <input type="text" id="8140b65e-b6bc-76a6-c137-d71817dbb4e6" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="73966eda-b5c3-d66c-7529-beb834f9e33c">
                                                            Price per bottle in winelist (ex VAT)

                                                        </label>
                                                        <input type="text" id="73966eda-b5c3-d66c-7529-beb834f9e33c" value="">
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Château Léoville Barton</td>
                            <td>
                                <ol class="flat-list possible-matches">
                                    <li>
                                        <label>
                                            <input type="radio" id="radio-0" name="match-group-3" checked>
                                            No probable matches
                                        </label>
                                    </li>
                                </ol>
                                <div class="simple-accordion">
                                    <div class="simple-accordion-item">
                                        <p class="simple-accordion-title">
                                            <span>Enter wine details manually</span>
                                            <svg class="icon " height="20" width="20" aria-hidden="true">
                                                <use xlink:href="../../sprite.svg#angle" />
                                            </svg>
                                        </p>
                                        <div class="collapsible-content">
                                            <div class="simple-accordion-inner-content">
                                                <div class="new-wine">

                                                    <div class="form-item ">
                                                        <label for="f13ca939-3761-90a9-efdf-f59eec494fe6">
                                                            Producer

                                                        </label>
                                                        <input type="text" id="f13ca939-3761-90a9-efdf-f59eec494fe6" value="Château Léoville Barton">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="da1b6c20-0ff7-843d-e07f-da12a28fad91">
                                                            Wine name

                                                        </label>
                                                        <input type="text" id="da1b6c20-0ff7-843d-e07f-da12a28fad91" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="73f1e888-49d5-92b4-50b9-3ddb99b2fc34">
                                                            Country

                                                        </label>
                                                        <input type="text" id="73f1e888-49d5-92b4-50b9-3ddb99b2fc34" value="France">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="ce32978f-32a8-2625-7058-6a902af06f20">
                                                            Region

                                                        </label>
                                                        <input type="text" id="ce32978f-32a8-2625-7058-6a902af06f20" value="Saint Julien">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="49fde7cd-0cd3-a819-eec6-870148349974">
                                                            District

                                                        </label>
                                                        <input type="text" id="49fde7cd-0cd3-a819-eec6-870148349974" value="">
                                                    </div>
                                                    <div class="form-item ">
                                                        <label for="93a4c41d-8b20-1687-60eb-244cdcc9af93">
                                                            Vintage

                                                        </label>
                                                        <input type="text" id="93a4c41d-8b20-1687-60eb-244cdcc9af93" value="2005">
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="submit-area ">
                <button type="button">
                    <span>
                        <svg class="icon " height="20" width="20" aria-hidden="true">
                            <use xlink:href="../../sprite.svg#save" />
                        </svg>
                        <span>Save wine info</span>
                    </span>
                </button>
            </div>
        </form>

    </main>

</div>
{{#> @regular-page}}

  {{#> @article}}

    <h1>Review your uploaded wines</h1>

    <p>We found <strong>23 wines</strong> in your upload. We’ve matched
    <strong>20 wines</strong> but found <strong>3 wines</strong> that
    couldn’t be matched. Please review them below.</p>

  {{/ @article}}

  {{> @matching-list wine-matching}}

{{/ @regular-page}}
{
  "wine-matching": {
    "match-items": [
      {
        "uploaded-name": "Torevillos Cabernet Sauvignon",
        "id": "match-group-1",
        "new-wine": {
          "input-fields": [
            {
              "label": "Producer",
              "id": "new-wine-producer-0"
            },
            {
              "label": "Wine name"
            },
            {
              "label": "Country",
              "id": "new-wine-country-0"
            },
            {
              "label": "Region",
              "id": "new-wine-region-0"
            },
            {
              "label": "District",
              "id": "new-wine-district-0"
            },
            {
              "label": "Vintage",
              "id": "new-wine-vintage-0"
            },
            {
              "label": "Bottle size"
            },
            {
              "label": "Bottles/case"
            },
            {
              "label": "Bottles in wine cellar"
            },
            {
              "label": "Supplier"
            },
            {
              "label": "Purchase Price per bottle(ex VAT)"
            },
            {
              "label": "Price per bottle in winelist (ex VAT)"
            }
          ]
        },
        "possible-matches": [
          {
            "name": "Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos",
            "vintage": 2012,
            "score": 90
          },
          {
            "name": "Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos",
            "vintage": 2009,
            "score": 86
          },
          {
            "name": "Abreu Cabernet Sauvignon Rico, Matteo & Lucia Thorevilos",
            "vintage": 2011,
            "score": 80
          },
          {
            "name": "None of the above"
          }
        ]
      },
      {
        "uploaded-name": "Roch de Chambes",
        "id": "match-group-2",
        "new-wine": {
          "input-fields": [
            {
              "label": "Producer"
            },
            {
              "label": "Wine name"
            },
            {
              "label": "Country"
            },
            {
              "label": "Region"
            },
            {
              "label": "District"
            },
            {
              "label": "Vintage"
            },
            {
              "label": "Bottle size"
            },
            {
              "label": "Bottles/case"
            },
            {
              "label": "Bottles in wine cellar"
            },
            {
              "label": "Supplier"
            },
            {
              "label": "Purchase Price per bottle(ex VAT)"
            },
            {
              "label": "Price per bottle in winelist (ex VAT)"
            }
          ],
          "submit-button": {
            "text": "Save wine"
          }
        },
        "possible-matches": [
          {
            "name": "Roc de Cambes",
            "score": 88
          },
          {
            "name": "None of the above"
          }
        ]
      },
      {
        "uploaded-name": "Château Léoville Barton",
        "id": "match-group-3",
        "new-wine": {
          "input-fields": [
            {
              "label": "Producer",
              "value": "Château Léoville Barton"
            },
            {
              "label": "Wine name"
            },
            {
              "label": "Country",
              "value": "France"
            },
            {
              "label": "Region",
              "value": "Saint Julien"
            },
            {
              "label": "District"
            },
            {
              "label": "Vintage",
              "value": 2005
            }
          ]
        },
        "possible-matches": [
          {
            "name": "No probable matches",
            "checked": true
          }
        ]
      }
    ],
    "submit-button": {
      "icon": "save",
      "text": "Save wine info"
    }
  }
}

No notes defined.