Repository: vkovic/uikit-computer-store-template
Branch: master
Commit: bdc03c99f4bf
Files: 73
Total size: 188.5 KB

Directory structure:
gitextract_l960gcdy/

├── .gitignore
├── LICENCE
├── README.md
├── gulpfile.js
├── package.json
└── src/
    ├── js/
    │   ├── script.js
    │   ├── uikit-icons.js
    │   └── uikit.js
    ├── sass/
    │   ├── custom.scss
    │   ├── style.scss
    │   ├── uikit-components.scss
    │   └── uikit-theme/
    │       ├── mixins/
    │       │   ├── _import.scss
    │       │   ├── accordion.scss
    │       │   ├── article.scss
    │       │   ├── background.scss
    │       │   ├── base.scss
    │       │   ├── breadcrumb.scss
    │       │   ├── button.scss
    │       │   ├── card.scss
    │       │   ├── form.scss
    │       │   ├── margin.scss
    │       │   ├── notification.scss
    │       │   ├── offcanvas.scss
    │       │   ├── section.scss
    │       │   ├── subnav.scss
    │       │   ├── table.scss
    │       │   └── text.scss
    │       └── variables.scss
    └── templates/
        ├── components/
        │   ├── _navbar.pug
        │   └── _toolbar.pug
        ├── data/
        │   └── _data.pug
        ├── layouts/
        │   ├── _account.pug
        │   ├── _article.pug
        │   ├── _checkout.pug
        │   ├── _default.pug
        │   ├── _index.pug
        │   ├── _informational.pug
        │   └── _pages.pug
        ├── mixins/
        │   ├── _article.pug
        │   ├── _icon.pug
        │   ├── _import.pug
        │   ├── _link-to-all.pug
        │   ├── _product-small.pug
        │   ├── _product.pug
        │   └── _quantity.pug
        ├── pages/
        │   ├── 404.pug
        │   ├── about.pug
        │   ├── account.pug
        │   ├── article.pug
        │   ├── blog.pug
        │   ├── brands.pug
        │   ├── cart.pug
        │   ├── catalog.pug
        │   ├── category.pug
        │   ├── checkout.pug
        │   ├── compare.pug
        │   ├── contacts.pug
        │   ├── delivery.pug
        │   ├── faq.pug
        │   ├── favorites.pug
        │   ├── index.pug
        │   ├── news.pug
        │   ├── personal.pug
        │   ├── product.pug
        │   ├── settings.pug
        │   └── subcategory.pug
        └── partials/
            ├── _article.pug
            ├── _cart-offcanvas.pug
            ├── _footer.pug
            ├── _head.pug
            ├── _header.pug
            ├── _nav-offcanvas.pug
            └── _products.pug

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.DS_Store
.DS_Store?
._*
Thumbs.db
Icon?
.Trashes
ehthumbs.db
*.log
*.log*
*.swp
.idea
dist
node_modules

================================================
FILE: LICENCE
================================================
The MIT License (MIT)

Copyright (c) 2018 Vladimir Ković

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: README.md
================================================
# Computer store e-commerce template

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vkovic/uikit-computer-store-template/blob/master/LICENSE)

### Computer store e-commerce template built with `UIkit` using `Sass`

This theme is port of
[chekromul/uikit-ecommerce-template](https://github.com/chekromul/uikit-ecommerce-template)
to use `Sass` instead of `Less`.

After I found this great e-commerce theme, I decided to spend some time adopting it to `Sass` preprocessor since lot of
us are preferring it over `Less`.

Demo: [https://vkovic.github.io/uikit-computer-store-template](https://vkovic.github.io/uikit-computer-store-template)

[![Computer store e-commerce template](https://raw.githubusercontent.com/vkovic/uikit-computer-store-template/gh-pages/images/preview.png "Computer store e-commerce template")](https://raw.githubusercontent.com/vkovic/uikit-computer-store-template/gh-pages/images/preview.png "Computer store e-commerce template")

---

## Compatibility

This theme requires `Node.js` version `>= 8.2`

## Technologies

- [UIkit](https://getuikit.com)
- [Pug](https://pugjs.org)
- [Sass](https://sass-lang.com/)
- [Gulp](https://gulpjs.com)

## Installation

To install theme first clone this repo

```bash
git clone https://github.com/vkovic/uikit-computer-store-template.git
```

and go to directory

```bash
cd uikit-computer-store-template
```

After this, there is 2 ways of installing it either using `npm` or `yarn`

### Install via `npm`

Install required packages via `npm`:

```bash
npm install
```

Compile project

```bash
npm run build
```

### Install via `yarn`

Install required packages via `yarn`:

```bash
yarn
```

Compile project

```bash
yarn build
```

## Copyright and Credits

- [Original (Less version) Theme Developer](https://github.com/chekromul)
- [Shopping Categories Colection](https://thenounproject.com/jarosigrist/collection/shopping-categories) icons by
Jaro Sigrist from Noun Project. Licensed under Creative Commons Attribution 3.0.


================================================
FILE: gulpfile.js
================================================
var gulp = require('gulp'),
    clean = require('gulp-clean'),
    include = require('gulp-include'),
    pug = require('gulp-pug'),
    sass = require('gulp-sass'),
    server = require('gulp-webserver'),
    tildeImporter = require('node-sass-tilde-importer');

// Remove previous dist folder if exists
gulp.task('clean', function () {
    return gulp.src('dist', {read: false, allowEmpty: true})
        .pipe(clean());
});

// Compile pug templates into HTML
gulp.task('html', function () {
    return gulp.src('src/templates/pages/*.pug')
        .pipe(pug({
            basedir: 'src/templates',
            pretty: true
        }))
        .pipe(gulp.dest('dist'));
});

// Copy images to dist
gulp.task('images', function () {
    return gulp.src('src/img/**/*')
        .pipe(gulp.dest('dist/images'));
});

// Compile scss files into css
gulp.task('styles', function () {
    return gulp.src('src/sass/style.scss')
        .pipe(sass({importer: tildeImporter}))
        .pipe(gulp.dest('dist/styles'));
});

// Compile js files
gulp.task('scripts', function () {
    return gulp.src('src/js/*.js')
        .pipe(include({
            extensions: 'js',
            hardFail: true,
            includePaths: [
                __dirname + '/node_modules',
                __dirname + '/src/js'
            ]
        }))
        .pipe(gulp.dest('dist/scripts'));
});

// Run server from dist directory and open browser
gulp.task('server', function () {
    gulp.src('dist').pipe(server({open: true}));
});

// Compile project by combining tasks above
gulp.task('build',
    gulp.series(
        'clean',
        gulp.parallel('html', 'images', 'styles', 'scripts'), // Parallel tasks
        'server'
    )
);

================================================
FILE: package.json
================================================
{
    "name": "uikit-computer-store-template",
    "version": "1.0.0",
    "description": "Computer store e-commerce template built with UIkIt, Sass and JS",
    "author": "Vladimir Ković",
    "license": "MIT",
    "homepage": "https://github.com/vkovic/uikit-computer-store-template",
    "main": "index.html",
    "scripts": {
        "build": "gulp build"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/vkovic/uikit-computer-store-template.git"
    },
    "engines": {
        "node": ">=8.2"
    },
    "devDependencies": {
        "gulp": "^4.0.0",
        "gulp-autoprefixer": "^6.0.0",
        "gulp-clean": "^0.4.0",
        "gulp-include": "^2.3.1",
        "gulp-pug": "^4.0.1",
        "gulp-sass": "^4.0.2",
        "gulp-webserver": "^0.9.1",
        "node-sass-tilde-importer": "^1.0.2"
    },
    "dependencies": {
        "uikit": "^3.0.0-rc.26"
    }
}


================================================
FILE: src/js/script.js
================================================
// Google Maps
function initMap() {
    var elements = document.querySelectorAll('.js-map');
    Array.prototype.forEach.call(elements, function (el) {
        var lat = +el.dataset.latitude,
            lng = +el.dataset.longitude,
            zoom = +el.dataset.zoom;

        if ((lat !== '') && (lng !== '') && (zoom > 0)) {
            var map = new google.maps.Map(el, {
                zoom: zoom,
                center: {lat: lat, lng: lng},
                disableDefaultUI: true
            });

            var marker = new google.maps.Marker({
                map: map,
                animation: google.maps.Animation.DROP,
                position: {lat: lat, lng: lng}
            });
        }
    });
}

// Change view
(function () {
    var container = document.getElementById('products');

    if (container) {
        var grid = container.querySelector('.js-products-grid'),
            viewClass = 'tm-products-',
            optionSwitch = Array.prototype.slice.call(container.querySelectorAll('.js-change-view a'));

        function init() {
            optionSwitch.forEach(function (el, i) {
                el.addEventListener('click', function (ev) {
                    ev.preventDefault();
                    _switch(this);
                }, false);
            });
        }

        function _switch(opt) {
            optionSwitch.forEach(function (el) {
                grid.classList.remove(viewClass + el.getAttribute('data-view'));
            });
            grid.classList.add(viewClass + opt.getAttribute('data-view'));
        }

        init();
    }
})();

// Increment
function increment(incrementor, target) {
    var value = parseInt(document.getElementById(target).value, 10);
    value = isNaN(value) ? 0 : value;

    if (incrementor < 0 && value > 1) {
        value += incrementor;
    } else {
        value += incrementor;
    }
    document.getElementById(target).value = value;
}

// Scroll to description
(function () {
    UIkit.scroll('.js-scroll-to-description', {
        duration: 300,
        offset: 58
    });
})();

// Update sticky tabs
(function () {
    UIkit.util.on('.js-product-switcher', 'show', function () {
        UIkit.update();
    });
})();

// Add to cart
(function () {
    var addToCartButtons = document.querySelectorAll('.js-add-to-cart');

    Array.prototype.forEach.call(addToCartButtons, function (el) {
        el.onclick = function () {
            UIkit.offcanvas('#cart-offcanvas').show();
        };
    });
})();

// Action buttons
(function () {
    var addToButtons = document.querySelectorAll('.js-add-to');

    Array.prototype.forEach.call(addToButtons, function (el) {
        var link,
            message = '<span class="uk-margin-small-right" uk-icon=\'check\'></span>Added to ',
            links = {
                favorites: '<a href="/favorites">favorites</a>',
                compare: '<a href="/compare">compare</a>'
            };

        if (el.classList.contains('js-add-to-favorites')) {
            link = links.favorites;
        }

        if (el.classList.contains('js-add-to-compare')) {
            link = links.compare;
        }

        el.onclick = function () {
            if (!this.classList.contains('js-added-to')) {
                UIkit.notification({
                    message: message + link,
                    pos: 'bottom-right'
                });
            }
            this.classList.toggle('tm-action-button-active');
            this.classList.toggle('js-added-to');
        };
    });
})();




================================================
FILE: src/js/uikit-icons.js
================================================
//=require ../../node_modules/uikit/dist/js/uikit-icons.js

================================================
FILE: src/js/uikit.js
================================================
//=require ../../node_modules/uikit/dist/js/uikit.js

================================================
FILE: src/sass/custom.scss
================================================
//
// Custom variables
//

// Breakpoints
$breakpoint-tablet: 768px;

// Product card
$product-card-title-max-lines: 3;
$product-card-title-font-size: 16px;
$product-card-title-line-height: 22px;
$product-card-title-max-height: $product-card-title-max-lines * $product-card-title-line-height;
$product-card-title-font-size-s: 18px;
$product-card-title-line-height-s: 24px;
$product-card-title-max-height-s: $product-card-title-max-lines * $product-card-title-line-height-s;
$product-card-price-font-size: 20px;
$product-card-add-button-width: 36px;
$product-card-add-button-height: 36px;

// List view product card
$list-view-product-card-media-width: 33.3%;
$list-view-product-card-media-min-width: 170px;
$list-view-product-card-price-font-size: 24px;

// Scrollbox
$scrollbox-max-height: 300px;

// Checkbox, radio
$control-checkbox-image: "../../images/backgrounds/form-checkbox.svg";
$control-radio-image: "../../images/backgrounds/form-radio.svg";
$control-inputs-size: 16px;
$control-inputs-hover: #F8F8F8;

// Ratio
$ratio-1-1: 100%;
$ratio-3-2: 66.66%;
$ratio-4-3: 75%;
$ratio-16-9: 56.25%;

//
// Custom mixins
//

@mixin center($horizontal: true, $vertical: true) {
    position: absolute;

    @if $horizontal == true and $vertical == true {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @if $horizontal == true and $vertical == false {
        left: 50%;
        transform: translate(-50%, 0);
    }

    @if $horizontal == false and $vertical == true {
        top: 50%;
        transform: translate(0, -50%);
    }
}

/* Tablet landscape and bigger */
@media (min-width: $breakpoint-medium) {
    h3, .uk-h3 {
        font-size: $base-h3-font-size-m;
    }
}


//
// Toolbar
//

.tm-toolbar-container:not(.uk-navbar-transparent) {
    background: $global-secondary-background;
}

.tm-toolbar-container .uk-navbar-item {
    color: $navbar-nav-item-color;
}

.tm-toolbar-container .uk-navbar-nav > li > a {
    text-transform: none;
}

.tm-toolbar-container .uk-navbar-nav > li > a,
.tm-toolbar-container .uk-navbar-item,
.tm-toolbar-container .uk-navbar-toggle {
    height: 40px;
}

//
// Navbar
//

.tm-navbar-container:not(.uk-navbar-transparent) {
    background: $global-background;
}

.tm-navbar-container {
    border-bottom: $global-border-width solid $global-border;
}

.tm-navbar-container-fixed {
    z-index: $global-z-index + 5;
}

.tm-navbar-container .uk-navbar-nav > li > a,
.tm-navbar-container .uk-navbar-item,
.tm-navbar-container .uk-navbar-toggle {
    height: 60px;
}

//
// Navbar button
//

.tm-navbar-button {
    position: relative;
    padding: 0 10px;

    @media (min-width: $breakpoint-small) {
        padding: 0 15px;
    }

    .uk-badge {
        font-size: .625rem;
        position: absolute;
        top: 10px;
        right: 5px;
        min-width: 18px;
        height: 18px;
    }
}

//
// Link to all
//

.tm-link-to-all {
    & > * {
        vertical-align: middle;
    }

    & > .uk-icon {
        position: relative;
        left: 0;
        margin-left: 3px;
        transition: left 60ms;
    }

    &:hover > .uk-icon {
        left: 2px;
    }
}

//
// Aside column
//

.tm-aside-column {
    min-width: 270px;
}

//
// Change view
//

.tm-change-view {
    display: none;

    @media(min-width: $breakpoint-tablet) {
        display: flex;
    }
}

//
// Product card
//

.tm-product-card {
    display: flex;
    flex-direction: row;
    transition: box-shadow $box-shadow-duration ease-in-out;
    background-color: $global-background;
    border-left: $global-border-width solid $global-border;
    border-bottom: $global-border-width solid $global-border;
    //box-shadow: 0 0 0 $global-border-width $global-border;

    &.uk-first-column {
        border-left: none;
    }

    @media (max-width: $breakpoint-tablet - 1) {
        width: 100%;
    }

    @media (min-width: $breakpoint-tablet) {
        flex-direction: column;

        &:hover {
            z-index: 2;
            box-shadow: $global-xlarge-box-shadow;
        }
    }
}

// Media
.tm-product-card-media {
    position: relative;
    box-sizing: border-box;
    width: 40%;
    flex-shrink: 0;

    & > .tm-ratio {
        height: 100%;
    }

    & > .tm-ratio > .tm-media-box {
        padding: 15px;
    }

    @media (min-width: $breakpoint-small) {
        & > .tm-ratio > .tm-media-box {
            padding: 20px;
        }
    }

    @media (min-width: $breakpoint-tablet) {
        width: 100%;
    }
}

// Body
.tm-product-card-body {
    display: flex;
    flex-direction: column;
    padding: 15px 15px 15px 0;
    flex-grow: 1;

    @media (min-width: $breakpoint-small) {
        padding: 20px 20px 20px 0;
    }

    @media (min-width: $breakpoint-tablet) {
        padding: 0 20px 20px 20px;
    }
}

// Title
.tm-product-card-title {
    font-size: $product-card-title-font-size;
    line-height: $product-card-title-line-height;
    display: -webkit-box;
    display: -ms-flexbox;
    overflow: hidden;
    max-height: $product-card-title-max-height;
    margin: 0 0 20px;
    text-overflow: ellipsis;
    color: inherit;
    -webkit-line-clamp: $product-card-title-max-lines;
    -webkit-box-orient: vertical;

    @media (min-width: $breakpoint-small) {
        font-size: $product-card-title-font-size-s;
        line-height: $product-card-title-line-height-s;
        max-height: $product-card-title-max-height-s;
    }
}

.tm-product-card-properties {
    display: none;
    margin: 0;

    & > li:nth-child(n+2) {
        margin-top: 5px;
    }
}

.tm-product-card-shop {
    display: flex;
    margin-top: auto;
    align-items: flex-end;
}

.tm-product-card-prices {
    flex-grow: 1;
}

.tm-product-card-price {
    font-size: $product-card-price-font-size;
    font-weight: 500;
    line-height: 1;
}

.tm-product-card-add {
    display: flex;
    margin-left: 10px;
    align-items: flex-end;
    flex-shrink: 0;
}

.tm-product-card-add-button {
    position: relative;
    bottom: -8px;
    display: inline-flex;
    width: $product-card-add-button-width;
    height: $product-card-add-button-height;
    padding: 0;
    border-radius: 500px;
    justify-content: center;
    align-items: center;
}

.tm-product-card-add-button-text {
    display: none;
}

// Labels
.tm-product-card-labels {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 20px;

    & > .uk-label {
        font-size: 10px;
        display: table;
        margin-bottom: 3px;
        margin-left: auto;
        padding: 0 3px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

// Actions
.tm-product-card-actions {
    margin-right: 10px;
    margin-bottom: 2px;

    &:only-child {
        margin-right: 0;
    }
}

.tm-product-card-action {
    margin-right: 10px;

    &:last-child {
        margin-right: 0;
    }
}

.tm-product-card-action-text {
    display: none;
    border-bottom: 1px dotted;
}

// List view
.tm-products-list .tm-product-card {
    width: 100%;
    border-bottom: $global-border-width solid $global-border;
    box-shadow: none;

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        box-shadow: none;
    }
}

@media (min-width: $breakpoint-tablet) {

    .tm-products-list .tm-product-card {
        flex-direction: row;
    }

    .tm-products-list .tm-product-card-media {
        width: 33.3%;
    }

    .tm-products-list .tm-product-card-body {
        flex-direction: row;
        padding: 20px 20px 20px 0;
    }

    .tm-products-list .tm-product-card-info {
        padding-right: 20px;
        flex-grow: 1;
        flex-basis: 0%; // for IE
    }

    .tm-products-list .tm-product-card-properties {
        display: block;
    }

    .tm-products-list .tm-product-card-shop {
        display: block;
        box-sizing: border-box;
        width: $list-view-product-card-media-width;
        min-width: $list-view-product-card-media-min-width;
        margin: 0;
        padding-left: 20px;
        border-left: $global-border-width solid $global-border;
        flex-shrink: 0;
    }

    .tm-products-list .tm-product-card-price {
        font-size: 24px;
    }

    .tm-products-list .tm-product-card-add {
        flex-direction: column;
        margin-top: 10px;
        margin-left: 0;
    }

    .tm-products-list .tm-product-card-add-button {
        bottom: 0;
        width: 100%;
        height: auto;
        padding: 0px $button-padding-horizontal;
        border-radius: $border-rounded-border-radius;
    }

    .tm-products-list .tm-product-card-add-button-icon {
        display: none;
    }

    .tm-products-list .tm-product-card-add-button-text {
        display: block;
    }

    .tm-products-list .tm-product-card-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
        margin-right: 0;
        margin-bottom: 0;
        order: 1;
        align-self: flex-start;

        &:only-child {
            margin-top: 0;
        }
    }

    .tm-products-list .tm-product-card-action {
        margin-right: 0;
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .tm-products-list .tm-product-card-action-text {
        display: inline;
        margin-left: 5px;
    }
}

//
// Actions buttons
//

.tm-action-button-active,
.tm-action-button-active > * {
    color: $text-danger-color;
}

//
// Filters
//

.tm-filters {
    display: none;
}

.tm-filters .uk-accordion > * {
    margin-top: 0;
    border-top: $global-border-width solid $global-border;

    &:first-child {
        border-top: none;
    }
}

// Offcanvas
.tm-filters.uk-offcanvas.uk-open {
    margin: 0;
    padding: 0;
}

.tm-filters.uk-offcanvas.uk-offcanvas-overlay:before {
    position: fixed;
}

@media (min-width: $breakpoint-medium) {

    .tm-filters.uk-offcanvas {
        position: static;
        display: block;
    }

    .tm-filters.uk-offcanvas .uk-offcanvas-bar {
        position: static;
        overflow: visible;
        width: auto;
        transform: none;
        background: none;
    }

    .tm-filters.uk-offcanvas .uk-offcanvas-bar > .uk-card > .uk-card-header {
        display: none;
    }

}

//
// Scrollbox
//

.tm-scrollbox {
    overflow: auto;
    max-height: $scrollbox-max-height;
    background: linear-gradient(#FFF 30%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0), #FFF 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background-color: $global-background;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
}

//
// Checkbox, radio
//

.tm-checkbox,
.tm-radio {
    display: none;

    & + label {
        position: relative;
        display: inline-flex;
        cursor: pointer;
    }

    & + label::before,
    & + label::after {
        content: "";
        display: block;
        width: $control-inputs-size;
        height: $control-inputs-size;
    }

    & + label::before {
        margin-top: 3px;
        margin-right: $global-small-margin;
        border: $global-border-width solid $global-border;
        flex-shrink: 0;
    }

    &:hover + label::before {
        background-color: $control-inputs-hover;
    }

    &:checked + label::before {
        border-color: transparent;
        background-color: $global-primary-background;
    }

    & + label::after {
        position: absolute;
        top: 3px;
        left: 0;
        border: 1px solid transparent;
    }

    &:checked + label::after {
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
}

.tm-checkbox + label::before {
    border-radius: $border-rounded-border-radius;
}

.tm-radio + label::before {
    border-radius: 50%;
}

.tm-checkbox:checked + label::after {
    @include svg-fill($control-checkbox-image, "#000", $global-inverse-color);
}

.tm-radio:checked + label::after {
    @include svg-fill($control-radio-image, "#000", $global-inverse-color);
}

//
// Help icon
//

.tm-help-icon {
    position: relative;
    margin-left: $global-xsmall-margin;
    cursor: pointer;
    color: $global-muted-color;
    border-radius: 100%;
    background-color: $global-muted-background;

    &:hover {
        color: $global-color;
    }
}

//
// Slider
//

.tm-slider-items {

    .tm-media-box-frame {
        padding: $global-xsmall-gutter;
        transition: 0.25s linear;
        transition-property: opacity;
        opacity: 0.75;
    }

    & > :hover .tm-media-box-frame {
        opacity: 1;
    }

    & > .uk-active .tm-media-box-frame {
        opacity: 1;
        border-color: $global-primary-background;
    }
}

//
// Variations
//

.tm-variations {
    margin: 0 0 0 -10px;

    & > * {
        padding-left: 10px;
    }

    & > * > :first-child {
        color: $global-color;
        border: $global-border-width solid $global-border;
    }

    & > .uk-active > a {
        color: $global-color;
        border-color: $global-primary-background;
        background-color: transparent;
    }

    & > * > .tm-variation-color {
        padding: 5px;
        border-radius: 50%;
    }
}

.tm-variation-color > div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

//
// Product
//

.tm-product-info {
    border-top: $global-border-width solid $global-border;

    @media (min-width: $breakpoint-medium) {
        min-width: 390px;
        border-top: none;
        border-left: $global-border-width solid $global-border;
    }
}

// Price
.tm-product-price {
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
}

// Add to card button
.tm-product-add-button {
    padding: 0 15px;

    @media(min-width: 420px) {
        padding: 0 25px;
    }
}

// Description
.tm-product-description {
    border-top: $global-border solid $global-border-width;
}

// Nav
.tm-product-nav {
    display: flex;
    overflow: auto;
    background-color: $global-background;

    & > .uk-subnav {
        display: flex;
        margin: 0 auto;
        padding: 10px 15px;
        flex-wrap: nowrap;
        flex-shrink: 0;

        @media(min-width: $breakpoint-small) {
            padding: 20px;
        }

        & > :first-child {
            padding-left: 0;
        }
    }
}

.tm-product-nav-fixed {
    transition: box-shadow 0.1s ease-in-out;
    box-shadow: inset 0 -$global-border-width 0 0 $global-border;
}

//
// Quantity
//

.tm-quantity-input {
    width: 60px;
    margin: 0 $global-xsmall-margin;
    text-align: center;
}

//
// Slidenav
//

.tm-slidenav.uk-invisible {
    visibility: visible !important;
    pointer-events: none;
    opacity: 0.3;
}

//
// Checkout
//

.tm-checkout {
    counter-reset: list;
}

.tm-checkout-title::before {
    content: counter(list) ". ";
    counter-increment: list;
    color: $global-muted-color;
}

//
// Choose
//

.tm-choose {
    position: relative;
    width: 100%;
    padding: 40px 20px 10px;
    cursor: pointer;
    border: $global-border-width solid $global-border;
    border-radius: $border-rounded-border-radius;

    &.uk-active {
        border-color: $global-primary-background;
    }

    &:not(.uk-active):hover,
    &:not(.uk-active):focus {
        background-color: $global-muted-background;
    }

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 12px;
        left: 50%;
        display: block;
        width: $control-inputs-size;
        height: $control-inputs-size;
        cursor: pointer;
        transform: translate(-50%, 0);
    }

    &::before {
        border: $global-border-width solid $global-border;
        border-radius: 50%;
        flex-shrink: 0;
    }

    &:hover::before {
        background-color: $control-inputs-hover;
    }

    &.uk-active::before {
        border-color: transparent;
        background-color: $global-primary-background;
    }

    &::after {
        position: absolute;
        border: 1px solid transparent;
    }

    &.uk-active::after {
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        @include svg-fill($control-radio-image, "#000", $global-inverse-color);
    }

    .tm-choose-title {
        font-size: $global-small-font-size;
        text-align: center;
        text-transform: uppercase;
        color: $global-muted-color;
    }

    &.uk-active .tm-choose-title {
        color: $global-color;
    }

    .tm-choose-description {
        font-size: $global-xsmall-font-size;
        margin-top: $global-xsmall-margin;
        text-align: center;
        color: $global-muted-color;
    }
}

//
// Wrapper
//

// Small card
.uk-card-body.uk-card-small .tm-wrapper,
.uk-card-small .uk-card-body .tm-wrapper {
    margin-right: -$card-small-body-padding-horizontal;
    margin-left: -$card-small-body-padding-horizontal;
}

.uk-card-body.uk-card-small .tm-wrapper:first-child,
.uk-card-small .uk-card-body .tm-wrapper:first-child {
    margin-top: -$card-small-body-padding-vertical;
}

.uk-card-body.uk-card-small .tm-wrapper:last-child,
.uk-card-small .uk-card-body .tm-wrapper:last-child {
    margin-bottom: -$card-small-body-padding-vertical;
}

.uk-card-body.uk-card-small .tm-wrapper figcaption,
.uk-card-small .uk-card-body .tm-wrapper figcaption {
    margin-right: $card-small-body-padding-horizontal;
    margin-left: $card-small-body-padding-horizontal;
}

// Normal card
.uk-card-body .tm-wrapper {
    margin-right: -$card-body-padding-horizontal;
    margin-left: -$card-body-padding-horizontal;
}

.uk-card-body .tm-wrapper:first-child {
    margin-top: -$card-body-padding-vertical;
}

.uk-card-body .tm-wrapper:last-child {
    margin-bottom: -$card-body-padding-vertical;
}

.uk-card-body .tm-wrapper figcaption {
    margin-top: $global-xsmall-margin;
    margin-right: $card-body-padding-horizontal;
    margin-left: $card-body-padding-horizontal;
    text-align: center;
    color: $global-muted-color;
}

@media (min-width: $breakpoint-large) {

    .uk-card-body .tm-wrapper {
        margin-right: -$card-body-padding-horizontal-l;
        margin-left: -$card-body-padding-horizontal-l;
    }

    .uk-card-body .tm-wrapper:first-child {
        margin-top: -$card-body-padding-vertical-l;
    }

    .uk-card-body .tm-wrapper:last-child {
        margin-bottom: -$card-body-padding-vertical-l;
    }

}

//
// Compare table
//

.tm-compare-table {
    height: 0;

    td,
    th {
        vertical-align: top;
    }

    td:not(:first-child) {
        //border-left: $table-striped-border-width solid $table-striped-border;
    }

    th {
        font-size: $global-font-size;
        text-transform: none;
    }

    tbody > tr:nth-of-type(even) {
        background-color: $table-striped-row-background;
    }
}

.tm-compare-table-column {
    min-width: 240px;
}

//
// Rating
//

.tm-rating {
    margin-left: -3px;
    color: $global-muted-color;

    & > * {
        padding-left: 3px;
    }
}

//
// Reviews
//

.tm-reviews-column {
    min-width: 200px;
}

//
// Cart
//

.tm-cart-quantity-column {
    min-width: 115px !important;
}

//
// Nav
//

.tm-nav > li > a {
    padding: 10px 0;
}

.tm-nav > li.uk-active > a,
.tm-nav > li > a:hover {
    box-shadow: inset 2px 0 0 $global-primary-background;
}

.tm-nav > li.uk-active > a {
    font-weight: 500;
}

//
// Ratio
//

.tm-ratio {
    position: relative;

    &::before {
        content: "";
        display: block;
        width: 100%;
    }

    & > * {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.tm-ratio-1-1::before {
    padding-top: $ratio-1-1;
}

.tm-ratio-3-2::before {
    padding-top: $ratio-3-2;
}

.tm-ratio-4-3::before {
    padding-top: $ratio-4-3;
}

.tm-ratio-16-9::before {
    padding-top: $ratio-16-9;
}

//
// Media box
//

.tm-media-box {
    display: block;
    box-sizing: border-box;
    height: 100%;
}

.tm-media-box-frame {
    border: $global-border-width solid $global-border;
    border-radius: $border-rounded-border-radius;
}

.tm-media-box-zoom {
    cursor: zoom-in;
}

.tm-media-box-wrap {
    position: relative;
    height: 100%;
    margin: 0;

    & > * {
        @include center();
        display: block;
        max-width: 100%;
        max-height: 100%;
    }
}

//
// Pseudo
//

.tm-pseudo {
    border-bottom: $global-border-width dotted;
}

//
// Ignore container
//

.tm-ignore-container {
    @media(max-width: $breakpoint-small) {
        margin-right: -$container-padding-horizontal;
        margin-left: -$container-padding-horizontal;
        border-radius: 0;
    }
}

//
// Remove shadow
//

.tm-shadow-remove {
    box-shadow: none;
}

//
// Shine effect
//

.tm-shine {
    position: relative;
    overflow: hidden;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: -30px;
        width: 30px;
        height: 100%;
        transform: skew(-10deg, 0deg);
        opacity: 0.3;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.03) 1%,
                rgba(255, 255, 255, 0.6) 30%,
                rgba(255, 255, 255, 0.85) 50%,
                rgba(255, 255, 255, 0.85) 70%,
                rgba(255, 255, 255, 0.85) 71%,
                rgba(255, 255, 255, 0) 100%);
    }

    &:hover::after {
        left: 100%;
        transition: .6s ease-out;
    }
}

//
// Grayscale
//

.tm-grayscale {
    filter: grayscale(100%) opacity(50%);

    &:hover {
        filter: none;
    }
}

================================================
FILE: src/sass/style.scss
================================================
// UIkit variables and custom variable overrides
@import "uikit-theme/variables";

// UIkit mixins
@import "~uikit/src/scss/mixins-theme.scss";

// Custom mixins for components override (using hooks)
// (see: https://getuikit.com/docs/sass#use-hooks)
@import "uikit-theme/mixins/import";

// Partial import of UIkit components needed by our theme
@import "uikit-components";

// Our custom styles
@import "custom";

================================================
FILE: src/sass/uikit-components.scss
================================================
// Base
@import "~uikit/src/scss/components/mixin";
@import "~uikit/src/scss/components/base";

// Elements
@import "~uikit/src/scss/components/link";
@import "~uikit/src/scss/components/heading";
//@import "~uikit/src/scss/components/divider";
@import "~uikit/src/scss/components/list";
@import "~uikit/src/scss/components/description-list";
@import "~uikit/src/scss/components/table";
@import "~uikit/src/scss/components/icon";
//@import "~uikit/src/scss/components/form-range";
@import "~uikit/src/scss/components/form"; // After: Icon, Form Range
@import "~uikit/src/scss/components/button";

// Layout
@import "~uikit/src/scss/components/section";
@import "~uikit/src/scss/components/container";
@import "~uikit/src/scss/components/grid";
//@import "~uikit/src/scss/components/tile";
@import "~uikit/src/scss/components/card";

// Common
@import "~uikit/src/scss/components/close"; // After: Icon
@import "~uikit/src/scss/components/spinner"; // After: Icon
//@import "~uikit/src/scss/components/totop"; // After: Icon
//@import "~uikit/src/scss/components/marker"; // After: Icon
//@import "~uikit/src/scss/components/alert"; // After: Close
@import "~uikit/src/scss/components/badge";
@import "~uikit/src/scss/components/label";
@import "~uikit/src/scss/components/overlay"; // After: Icon
@import "~uikit/src/scss/components/article"; // After: Subnav
//@import "~uikit/src/scss/components/comment"; // After: Subnav
@import "~uikit/src/scss/components/search"; // After: Icon

// Navs
@import "~uikit/src/scss/components/nav";
@import "~uikit/src/scss/components/navbar"; // After: Card, Grid, Nav, Icon, Search
@import "~uikit/src/scss/components/subnav";
@import "~uikit/src/scss/components/breadcrumb";
@import "~uikit/src/scss/components/pagination";
@import "~uikit/src/scss/components/tab";
@import "~uikit/src/scss/components/slidenav"; // After: Icon
@import "~uikit/src/scss/components/dotnav";
//@import "~uikit/src/scss/components/thumbnav";

// JavaScript
@import "~uikit/src/scss/components/accordion";
@import "~uikit/src/scss/components/drop"; // After: Card
@import "~uikit/src/scss/components/dropdown"; // After: Card
@import "~uikit/src/scss/components/modal"; // After: Close
@import "~uikit/src/scss/components/lightbox"; // After: Close
@import "~uikit/src/scss/components/slideshow";
@import "~uikit/src/scss/components/slider";
@import "~uikit/src/scss/components/sticky";
@import "~uikit/src/scss/components/offcanvas";
@import "~uikit/src/scss/components/switcher";
//@import "~uikit/src/scss/components/leader";
// Scrollspy
// Toggle
// Scroll

// Additional
@import "~uikit/src/scss/components/iconnav";
@import "~uikit/src/scss/components/notification";
@import "~uikit/src/scss/components/tooltip";
//@import "~uikit/src/scss/components/placeholder";
//@import "~uikit/src/scss/components/progress";
//@import "~uikit/src/scss/components/sortable";
//@import "~uikit/src/scss/components/countdown";

// Utilities
//@import "~uikit/src/scss/components/animation";
@import "~uikit/src/scss/components/width";
@import "~uikit/src/scss/components/height";
@import "~uikit/src/scss/components/text";
@import "~uikit/src/scss/components/column";
@import "~uikit/src/scss/components/cover";
@import "~uikit/src/scss/components/background";
//@import "~uikit/src/scss/components/align";
//@import "~uikit/src/scss/components/svg";
@import "~uikit/src/scss/components/utility";
@import "~uikit/src/scss/components/flex"; // After: Utility
@import "~uikit/src/scss/components/margin";
@import "~uikit/src/scss/components/padding";
@import "~uikit/src/scss/components/position";
//@import "~uikit/src/scss/components/transition";
@import "~uikit/src/scss/components/visibility";
@import "~uikit/src/scss/components/inverse";

// Need to be loaded last
//@import "~uikit/src/scss/components/print";

================================================
FILE: src/sass/uikit-theme/mixins/_import.scss
================================================
@import "accordion";
@import "article";
@import "background";
@import "base";
@import "breadcrumb";
@import "button";
@import "card";
@import "form";
@import "margin";
@import "notification";
@import "offcanvas";
@import "section";
@import "subnav";
@import "table";
@import "text";

================================================
FILE: src/sass/uikit-theme/mixins/accordion.scss
================================================
@mixin hook-accordion-title() {
    cursor: pointer;

    overflow: hidden;

    &::before {
        content: "";
        width: ($accordion-title-line-height * 1em);
        height: ($accordion-title-line-height * 1em);
        margin-left: $accordion-icon-margin-left;
        float: right;
        @include svg-fill($internal-accordion-close-image, "#000", $accordion-icon-color);
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .uk-open > &::before { @include svg-fill($internal-accordion-open-image, "#000", $accordion-icon-color); }
}

================================================
FILE: src/sass/uikit-theme/mixins/article.scss
================================================
@mixin hook-article-misc() {
    .uk-article-body {

        &:not(:first-child) {
            margin-top: $global-margin;
        }

        & > p,
        & > ul,
        & > ol,
        & > dl,
        & > h1,
        & > h2,
        & > h3,
        & > h4,
        & > h5,
        & > h6,
        & > blockquote,
        & > pre,
        & > iframe,
        & > figure,
        & > table,
        & > hr,
        & > twitterwidget {
            width: 100%;
            max-width: $breakpoint-small;
            margin-right: auto;
            margin-left: auto;
        }

        :first-child {
            margin-top: 0;
        }

        :last-child {
            margin-bottom: 0;
        }
    }
}

================================================
FILE: src/sass/uikit-theme/mixins/background.scss
================================================
@mixin hook-background-misc() {
    .uk-background-primary-lighten {
        background-color: $background-primary-background-lighten;
    }
}

================================================
FILE: src/sass/uikit-theme/mixins/base.scss
================================================
@mixin hook-base-body() {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

================================================
FILE: src/sass/uikit-theme/mixins/breadcrumb.scss
================================================
@mixin hook-breadcrumb-misc() {
    .uk-breadcrumb > :nth-last-child(2):not(.uk-first-column)::before {
        @media (max-width: $breakpoint-small) {
            content: "←";
            margin: 0 10px 0 -20px;
        }
    }

    .uk-breadcrumb > :not(:nth-last-child(2)) {
        display: none;

        @media (min-width: $breakpoint-small) {
            display: inline;
        }
    }
}

================================================
FILE: src/sass/uikit-theme/mixins/button.scss
================================================
@mixin hook-button() {
    border-radius: $border-rounded-border-radius;
    text-transform: $button-text-transform;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color, border-color;
}

================================================
FILE: src/sass/uikit-theme/mixins/card.scss
================================================
@mixin hook-card-default() {
    border-radius: $border-rounded-border-radius;
    box-shadow: $card-default-box-shadow;
}

@mixin hook-card-media() {
    margin: 0;
}

@mixin hook-card-misc() {
    .uk-card-body + .uk-card-body {
        border-top: $global-border-width solid $global-border;
    }

    /*
     * Default
     */

    .uk-card-body > .uk-nav-default {
        margin-left: (-$card-body-padding-horizontal);
        margin-right: (-$card-body-padding-horizontal);
    }
    .uk-card-body > .uk-nav-default:only-child {
        margin-top: (-$card-body-padding-vertical + 15px);
        margin-bottom: (-$card-body-padding-vertical + 15px);
    }

    .uk-card-body .uk-nav-default > li > a,
    .uk-card-body .uk-nav-default .uk-nav-header,
    .uk-card-body .uk-nav-default .uk-nav-divider {
        padding-left: $card-body-padding-horizontal;
        padding-right: $card-body-padding-horizontal;
    }

    .uk-card-body .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-body-padding-horizontal; }


    /* Desktop and bigger */
    @media (min-width: $breakpoint-large) {

        .uk-card-body > .uk-nav-default {
            margin-left: (-$card-body-padding-horizontal-l);
            margin-right: (-$card-body-padding-horizontal-l);
        }
        .uk-card-body > .uk-nav-default:only-child {
            margin-top: (-$card-body-padding-vertical-l + 15px);
            margin-bottom: (-$card-body-padding-vertical-l + 15px);
        }

        .uk-card-body .uk-nav-default > li > a,
        .uk-card-body .uk-nav-default .uk-nav-header,
        .uk-card-body .uk-nav-default .uk-nav-divider {
            padding-left: $card-body-padding-horizontal-l;
            padding-right: $card-body-padding-horizontal-l;
        }

        .uk-card-body .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-body-padding-horizontal-l; }

    }

    /*
     * Small
     */

    .uk-card-small > .uk-nav-default {
        margin-left: (-$card-small-body-padding-horizontal);
        margin-right: (-$card-small-body-padding-horizontal);
    }
    .uk-card-small > .uk-nav-default:only-child {
        margin-top: (-$card-small-body-padding-vertical + 15px);
        margin-bottom: (-$card-small-body-padding-vertical + 15px);
    }

    .uk-card-small .uk-nav-default > li > a,
    .uk-card-small .uk-nav-default .uk-nav-header,
    .uk-card-small .uk-nav-default .uk-nav-divider {
        padding-left: $card-small-body-padding-horizontal;
        padding-right: $card-small-body-padding-horizontal;
    }

    .uk-card-small .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-small-body-padding-horizontal; }

    /*
     * Large
     */

    /* Desktop and bigger */
    @media (min-width: $breakpoint-large) {

        .uk-card-large > .uk-nav-default { margin: 0; }
        .uk-card-large > .uk-nav-default:only-child { margin: 0; }

        .uk-card-large .uk-nav-default > li > a,
        .uk-card-large .uk-nav-default .uk-nav-header,
        .uk-card-large .uk-nav-default .uk-nav-divider {
            padding-left: 0;
            padding-right: 0;
        }

        .uk-card-large .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left; }

    }
}


================================================
FILE: src/sass/uikit-theme/mixins/form.scss
================================================
@mixin hook-form() {
    border-radius: $border-rounded-border-radius;
    border: $form-border-width solid $form-border;
    transition: 0.2s ease-in-out;
    transition-property: color, background-color, border;
}

@mixin hook-form-misc() {
    .uk-form-label-required::after {
        content: "*";
        margin-left: $global-xsmall-margin;
        color: $form-danger-color;
    }

    .uk-input[type=number] {
        -moz-appearance: textfield;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }
    }
}

================================================
FILE: src/sass/uikit-theme/mixins/margin.scss
================================================
@mixin hook-margin-misc() {
    .uk-margin-xsmall {
        margin-bottom: $margin-xsmall-margin;
    }

    * + .uk-margin-xsmall {
        margin-top: $margin-xsmall-margin !important;
    }

    .uk-margin-xsmall-top {
        margin-top: $margin-xsmall-margin !important;
    }

    .uk-margin-xsmall-bottom {
        margin-bottom: $margin-xsmall-margin !important;
    }

    .uk-margin-xsmall-left {
        margin-left: $margin-xsmall-margin !important;
    }

    .uk-margin-xsmall-right {
        margin-right: $margin-xsmall-margin !important;
    }
}

================================================
FILE: src/sass/uikit-theme/mixins/notification.scss
================================================
@mixin hook-notification-message() {
    box-shadow: $global-small-box-shadow;
}

================================================
FILE: src/sass/uikit-theme/mixins/offcanvas.scss
================================================
@mixin hook-offcanvas-misc() {
    .uk-offcanvas-bar .uk-card-header {
        min-height: 60px;
        padding-top: 0;
        padding-bottom: 0;

        // fixed bug in IE with "align-items: center"
        &::after {
            content: "";
            font-size: 0;
            display: block;
            min-height: inherit;
        }
    }

    .uk-offcanvas-bar .uk-card-header .uk-offcanvas-close {
        position: static;
    }
}

================================================
FILE: src/sass/uikit-theme/mixins/section.scss
================================================
@mixin hook-section-misc() {
    .uk-section-small {
        padding-top: $section-small-padding-vertical;
        padding-bottom: $section-small-padding-vertical;
    }

    /* Tablet landscape and bigger */
    @media (min-width: $breakpoint-medium) {
        .uk-section-small {
            padding-top: $global-medium-margin;
            padding-bottom: $global-medium-margin;
        }
    }
}

================================================
FILE: src/sass/uikit-theme/mixins/subnav.scss
================================================
@mixin hook-subnav-item() {
    border-radius: $border-rounded-border-radius;
    font-size: $subnav-item-font-size;
    text-transform: $subnav-item-text-transform;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
}

================================================
FILE: src/sass/uikit-theme/mixins/table.scss
================================================
@mixin hook-table-misc() {
    .uk-table tbody th {
        font-size: $global-font-size;
        vertical-align: top;
        text-transform: none;
    }

    .uk-table tbody tr {
        transition: background-color 0.1s linear;
    }
}

================================================
FILE: src/sass/uikit-theme/mixins/text.scss
================================================
@mixin hook-text-misc() {
    .uk-text-xsmall {
        font-size: $global-xsmall-font-size;
        line-height: 1.2;
    }

    .uk-text-bolder {
        font-weight: 500;
    }
}

================================================
FILE: src/sass/uikit-theme/variables.scss
================================================
//
// UIkit global variables definitions
//
// Default variables with default values needed for custom variables below ("Theme" section)
// (check "~node_modules/uikit/src/scss/variables.scss" for list of all available variables)
//

$global-background: #FFF;
$global-border-width: 1px;
$global-border-width: 1px;
$global-border: #E5E5E5;
$global-control-height: 40px;
$global-control-large-height: 55px;
$global-font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
$global-large-font-size: 1.5rem;
$global-large-font-size: 1.5rem;
$global-margin: 20px;
$global-margin: 20px;
$global-medium-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
$global-medium-margin: 40px;
$global-medium-margin: 40px;
$global-muted-background: #F8F8F8;
$global-muted-color: #999;
$global-primary-background: #1e87f0;
$global-small-font-size: 0.875rem;
$global-xlarge-font-size: 2rem;
$global-xsmall-font-size: 0.6875rem; // 11px
$global-xsmall-gutter: 10px;
$global-xsmall-margin: 5px;
$global-xxlarge-font-size: 2.625rem;

//
// UIkit default variable overrides
//

$border-rounded-border-radius: 4px;

//
// Theme overrides
//

// Base
$base-body-background: $global-muted-background;
$base-h1-font-size-m: $global-xxlarge-font-size;
$base-h1-font-size: $base-h1-font-size-m * 0.6;
$base-h2-font-size-m: $global-xlarge-font-size;
$base-h2-font-size: $base-h2-font-size-m * 0.7;
$base-h3-font-size-m: $global-large-font-size;
$base-h3-font-size: $base-h3-font-size-m * 0.8;
$base-link-hover-text-decoration: none;

// Section
$section-primary-color-mode: none;
$section-secondary-color-mode: none;
$section-small-padding-vertical: $global-margin;

// Card
$card-default-background: $global-background;
$card-primary-color-mode: none;
$card-secondary-color-mode: none;

// Article
$article-title-font-size-m: $global-xxlarge-font-size;
$article-title-font-size: $global-xxlarge-font-size * 0.6;

// Button
$button-border-width: $global-border-width;
$button-default-background: transparent;
$button-font-size: $global-small-font-size;
$button-large-font-size: $global-small-font-size;
$button-large-line-height: $global-control-large-height - ($button-border-width * 2) !default;
$button-line-height: $global-control-height - ($button-border-width * 2);

// Form
$form-background: $global-background;
$form-focus-background: $global-background;
$form-stacked-margin-bottom: 5px;

// Table
$table-header-cell-font-weight: normal;
$table-header-cell-color: $global-muted-color;

// Lightbox
$lightbox-background: #FFF;
$lightbox-button-background: none;
$lightbox-button-color: rgba(0, 0, 0, 0.7);
$lightbox-button-hover-color: #000;
$lightbox-item-color: rgba(0, 0, 0, 0.7);
$lightbox-toolbar-background: transparent;
$lightbox-toolbar-color: rgba(0, 0, 0, 0.7);
$lightbox-toolbar-icon-color: rgba(0, 0, 0, 0.7);
$lightbox-toolbar-icon-hover-color: #000;

// Offcanvas
$offcanvas-bar-background: $global-background;
$offcanvas-bar-color-mode: none;

// Notification
$notification-message-background: $global-background;

// Background
$background-primary-background-lighten: lighten($global-primary-background, 40%);

// Margin
$margin-xsmall-margin: $global-xsmall-margin;

// Navbar
$navbar-nav-item-font-size: $global-small-font-size !default;
$navbar-nav-item-height: 40px;

// Overlay
$overlay-primary-color-mode: none;

// Import variables
@import "../../../node_modules/uikit/src/scss/variables-theme";

================================================
FILE: src/templates/components/_navbar.pug
================================================
div.uk-navbar-container.tm-navbar-container(uk-sticky="cls-active: tm-navbar-container-fixed")
  div.uk-container(uk-navbar)

    div.uk-navbar-left

      //- Hamburger
      button(class="uk-navbar-toggle uk-hidden@m"
             uk-toggle="target: #nav-offcanvas"
             uk-navbar-toggle-icon)

      //- Logo
      a.uk-navbar-item.uk-logo(href="index.html")
        img(src="images/logo.svg" width="90" height="32" alt="Logo")

      //- Navigation
      nav(class="uk-visible@m")
        ul.uk-navbar-nav
          each item in navbarMenu
            li
              a(href= item.href)= item.name
                if item.items
                  +icon('chevron-down', '.75')(class="uk-margin-xsmall-left")
              if item.items
                div(class="uk-navbar-dropdown uk-margin-remove uk-padding-remove-vertical"
                    uk-drop="pos: bottom-justify;" +
                            "delay-show: 125;" +
                            "delay-hide: 50;" +
                            "duration: 75;" +
                            "boundary: .tm-navbar-container;" +
                            "boundary-align: true;" +
                            "pos: bottom-justify;" +
                            "flip: x")

                  if item.name === "Catalog"
                    div.uk-container
                      ul.uk-navbar-dropdown-grid.uk-child-width-1-5(uk-grid)
                        each category in item.items
                          li
                            div.uk-margin-top.uk-margin-bottom
                              a.uk-link-reset(href= category.href)
                                if category.image
                                  img(class="uk-display-block uk-margin-auto uk-margin-bottom"
                                      src= category.image
                                      alt= category.name
                                      width="80"
                                      height="80")
                                div.uk-text-bolder= category.name
                              if category.items
                                ul.uk-nav.uk-nav-default
                                  each subcategory in category.items
                                    li
                                      a(href="subcategory.html")= subcategory

                  if item.name === "Brands"
                    div.uk-container.uk-container-small.uk-margin-top.uk-margin-bottom
                      ul.uk-grid-small.uk-child-width-1-6(uk-grid)
                        each brand in item.items
                          li
                            div.tm-ratio.tm-ratio-4-3
                              a(class="uk-link-muted " +
                                      "uk-text-center " +
                                      "uk-display-block " +
                                      "uk-padding-small " +
                                      "uk-box-shadow-hover-large " +
                                      "tm-media-box"
                                href="#"
                                title= brand.name)
                                figure.tm-media-box-wrap
                                  img(src= brand.image alt= brand.name)
                      div.uk-text-center.uk-margin
                        +link-to-all('See all brands', item.href)

                  if item.name === "Pages"
                    div.uk-container.uk-container-small.uk-margin-top.uk-margin-bottom
                      ul.uk-nav.uk-nav-default.uk-column-1-3
                        each page in item.items
                          li
                            a(href= page.href)= page.name

    div.uk-navbar-right

      //- Search
      a.uk-navbar-toggle.tm-navbar-button(href="#" uk-search-icon)
      div.uk-navbar-dropdown.uk-padding-small.uk-margin-remove(
        uk-drop="mode: click;" +
                "cls-drop: uk-navbar-dropdown;" +
                "boundary: .tm-navbar-container;" +
                "boundary-align: true;" +
                "pos: bottom-justify;" +
                "flip: x")
        div.uk-container
          div.uk-grid-small.uk-flex-middle(uk-grid)
            div.uk-width-expand
              form.uk-search.uk-search-navbar.uk-width-1-1
                input.uk-search-input(type="search" placeholder="Search…" autofocus)
            div.uk-width-auto
              a.uk-navbar-dropdown-close(href="#" uk-close)

      //- Compare
      a(class="uk-navbar-item uk-link-muted uk-visible@m tm-navbar-button"
        href="compare.html")
        span(uk-icon="copy")
        span.uk-badge 3

      //- User
      a.uk-navbar-item.uk-link-muted.tm-navbar-button(href="account.html" uk-icon="user")
      div(class="uk-padding-small uk-margin-remove"
          uk-dropdown="pos: bottom-right; offset: -10; delay-hide: 200;"
          style="min-width: 150px;")
        ul.uk-nav.uk-dropdown-nav
          li
            a(href="account.html") Orders
              |
              |
              span (2)
          li
            a(href="favorites.html") Favorites
              |
              |
              span (3)
          li
            a(href="personal.html") Personal
          li
            a(href="settings.html") Settings
          li.uk-nav-divider
          li
            a(href="#") Log out

      //- Cart
      a.uk-navbar-item.uk-link-muted.tm-navbar-button(
        href="cart.html"
        uk-toggle="target: #cart-offcanvas"
        onclick="return false")
        span(uk-icon="cart")
        span.uk-badge 2

================================================
FILE: src/templates/components/_toolbar.pug
================================================
include ../mixins/_icon

div(class="uk-navbar-container " +
          "uk-light " +
          "uk-visible@m " +
          "tm-toolbar-container")
  div.uk-container(uk-navbar)

    div.uk-navbar-left
      nav
        ul.uk-navbar-nav

          //- Phone
          li
            a(href="#")
              +icon("receiver", ".75")(class="uk-margin-xsmall-right")
              span.tm-pseudo= shopInfo.phone

          //- Address
          li
            a(href="contacts.html" onclick="return false")
              +icon("location", ".75")(class="uk-margin-xsmall-right")
              span.tm-pseudo Store in St. Petersburg
              +icon("triangle-down", ".75")
            div.uk-margin-remove(uk-drop="mode: click; pos: bottom-center;")
              div(class="uk-card " +
                        "uk-card-default " +
                        "uk-card-small " +
                        "uk-box-shadow-xlarge " +
                        "uk-overflow-hidden " +
                        "uk-padding-small " +
                        "uk-padding-remove-horizontal " +
                        "uk-padding-remove-bottom")
                figure.uk-card-media-top.uk-height-small.js-map(
                  data-latitude= shopInfo.latitude
                  data-longitude= shopInfo.longitude
                  data-zoom="14")
                div.uk-card-body
                  div.uk-text-small
                    div.uk-text-bolder= shopInfo.storeName
                    div!= shopInfo.address
                    div= shopInfo.openingHours
                  div.uk-margin-small
                    +link-to-all("contacts", "contacts.html")(class="uk-link-reset")

          //- Opening hours
          li
            div.uk-navbar-item
              +icon("clock", ".75")(class="uk-margin-xsmall-right")
              | #{shopInfo.openingHours}

    div.uk-navbar-right
      nav
        ul.uk-navbar-nav
          each item in toolbarMenu
            li: a(href= item.href)= item.name

================================================
FILE: src/templates/data/_data.pug
================================================
-
  var shopInfo = {
    phone: '8 800 799 99 99',
    email: 'example@example.com',
    address: 'St.&nbsp;Petersburg, Nevsky&nbsp;Prospect&nbsp;28',
    openingHours: 'Daily 10:00–22:00',
    storeName: 'Store Name',
    latitude: 59.9356728,
    longitude: 30.3258604
  }

  var catalog = [{
    name: 'Laptops & Tablets',
    id: 'laptops-tablets',
    href: 'category.html',
    image: 'images/catalog/computers.svg',
    quantity: 367,
    items: [
      'Laptops',
      'Tablets',
      'Peripherals',
      'Keyboards',
      'Accessories'
    ]
  }, {
    name: 'Phones & Gadgets',
    id: 'phones-gadgets',
    href: 'category.html',
    image: 'images/catalog/phones.svg',
    quantity: 144,
    items: [
      'Smartphones',
      'Mobile Phones',
      'Smart watches',
      'Charging and batteries',
      'Accessories'
    ]
  }, {
    name: 'TV & Video',
    id: 'tv-video',
    href: 'category.html',
    image: 'images/catalog/tv.svg',
    quantity: 58,
    items: [
      'TV',
      'Home Cinema',
      'Satellite & Cable TV',
      'Projectors',
      'DVD & Blu-ray',
      'Accessories'
    ]
  }, {
    name: 'Games & Entertainment',
    id: 'games-entertainment',
    href: 'category.html',
    image: 'images/catalog/games.svg',
    quantity: 13,
    items: [
      'Gaming consoles',
      'Games',
      'Software',
      'Joysticks & gamepads',
      'Accessories'
    ]
  }, {
    name: 'Photo',
    id: 'photo',
    href: 'category.html',
    image: 'images/catalog/photo.svg',
    quantity: 59,
    items: [
      'Cameras',
      'Lenses',
      'Accessories'
    ]
  }]

  var brands = [{
    name: 'Apple',
    image: 'images/brands/apple.svg',
  }, {
    name: 'Samsung',
    image: 'images/brands/samsung.svg'
  }, {
    name: 'Sony',
    image: 'images/brands/sony.svg'
  }, {
    name: 'Microsoft',
    image: 'images/brands/microsoft.svg'
  }, {
    name: 'Intel',
    image: 'images/brands/intel.svg'
  }, {
    name: 'HP',
    image: 'images/brands/hp.svg'
  }, {
    name: 'LG',
    image: 'images/brands/lg.svg'
  }, {
    name: 'Lenovo',
    image: 'images/brands/lenovo.svg'
  }, {
    name: 'ASUS',
    image: 'images/brands/asus.svg'
  }, {
    name: 'Acer',
    image: 'images/brands/acer.svg'
  }, {
    name: 'Dell',
    image: 'images/brands/dell.svg'
  }, {
    name: 'Canon',
    image: 'images/brands/canon.svg'
  }]

  var toolbarMenu = [{
    name: 'News',
    href: 'news.html'
  }, {
    name: 'FAQ',
    href: 'faq.html'
  }, {
    name: 'Payment',
    href: '#'
  }]

  var navbarMenu = [{
    name: 'Catalog',
    href: 'catalog.html',
    items: catalog
  }, {
    name: 'Brands',
    href: 'brands.html',
    items: brands
  }, {
    name: 'Pages',
    href: '#',
    items: [{
      name: 'Catalog',
      href: 'catalog.html'
    }, {
      name: 'Category',
      href: 'category.html'
    }, {
      name: 'Subcategory',
      href: 'subcategory.html'
    }, {
      name: 'Product',
      href: 'product.html'
    }, {
      name: 'Cart',
      href: 'cart.html'
    }, {
      name: 'Checkout',
      href: 'checkout.html'
    }, {
      name: 'Compare',
      href: 'compare.html'
    }, {
      name: 'Brands',
      href: 'brands.html'
    }, {
      name: 'Compare',
      href: 'compare.html'
    }, {
      name: 'Account',
      href: 'account.html'
    }, {
      name: 'Favorites',
      href: 'favorites.html'
    }, {
      name: 'Personal',
      href: 'personal.html'
    }, {
      name: 'Settings',
      href: 'settings.html'
    }, {
      name: 'About',
      href: 'about.html'
    }, {
      name: 'Contacts',
      href: 'contacts.html'
    }, {
      name: 'Blog',
      href: 'blog.html'
    }, {
      name: 'News',
      href: 'news.html'
    }, {
      name: 'Article',
      href: 'article.html'
    }, {
      name: 'FAQ',
      href: 'faq.html'
    }, {
      name: 'Delivery',
      href: 'delivery.html'
    }, {
      name: '404',
      href: '404.html'
    }]
  }, {
    name: 'Blog',
    href: 'blog.html'
  }, {
    name: 'About',
    href: 'about.html'
  }, {
    name: 'Contacts',
    href: 'contacts.html'
  }]

  var footerMenuLeft = [{
    name: 'Catalog',
    href: 'catalog.html'
  }, {
    name: 'Brands',
    href: 'brands.html'
  }, {
    name: 'Delivery',
    href: 'delivery.html'
  }, {
    name: 'FAQ',
    href: 'faq.html'
  }, {
    name: 'Payment',
    href: '#'
  }]

  var footerMenuRight = [{
    name: 'About',
    href: 'about.html'
  }, {
    name: 'Contacts',
    href: 'contacts.html'
  }, {
    name: 'Blog',
    href: 'blog.html'
  }, {
    name: 'News',
    href: 'news.html'
  }]

  var socials = [{
    name: 'Facebook',
    icon: 'facebook'
  }, {
    name: 'Twitter',
    icon: 'twitter'
  }, {
    name: 'YouTube',
    icon: 'youtube'
  }, {
    name: 'Instagram',
    icon: 'instagram'
  }]

  var products = [{
    id: 1,
    name: 'Apple MacBook Pro 15" Touch Bar MPTU2LL/A 256GB (Silver)',
    type: 'Laptop',
    href: 'product.html',
    image: {
      small: 'images/products/1/1-small.jpg',
      medium: 'images/products/1/1-medium.jpg',
      large: 'images/products/1/1-large.jpg',
    },
    additionalImages: [{
      small: 'images/products/1/1-add-1-small.jpg',
      large: 'images/products/1/1-add-1-large.jpg',
    }, {
      small: 'images/products/1/1-add-2-small.jpg',
      large: 'images/products/1/1-add-2-large.jpg',
    }, {
      small: 'images/products/1/1-add-3-small.jpg',
      large: 'images/products/1/1-add-3-large.jpg',
    }, {
      small: 'images/products/1/1-add-4-small.jpg',
      large: 'images/products/1/1-add-4-large.jpg',
    }],
    price: '$1599.00',
    oldPrice: '$1899.00',
    brand: {
      name: 'Apple',
      image: 'images/brands/apple.svg',
      href: '#',
    },
    variations: [{
      name: 'Color',
      values: [{
        name: 'Space Grey',
        value: '#aaaeb1'
      }, {
        name: 'Silver',
        value: '#dddfde'
      }]
    }, {
      name: 'SSD Storage',
      values: [{
        name: '256 GB',
        value: '256 GB'
      }, {
        name: '512 GB',
        value: '512 GB'
      }]
    }],
    specifications: [{
    name: 'Performance',
    properties: {
      'Processor': 'Intel&nbsp;Core i7&nbsp;Quad-Core',
      'Base Clock Speed': '2.8&nbsp;GHz',
      'Maximum Boost Speed': '3.8&nbsp;GHz',
      'Total Installed Memory': '16&nbsp;GB',
      'Memory Type': 'LPDDR3&nbsp;SDRAM',
      'Memory Speed': '2133&nbsp;MHz',
      'Onboard Memory': '16&nbsp;GB',
      'Available Memory Slots': '—',
      'Graphics Type': 'Hybrid',
      'GPU': 'AMD Radeon&nbsp;Pro 555 with 2&nbsp;GB&nbsp;GDDR5 VRAM,<br>Intel HD Graphics&nbsp;630'
      }
    }, {
    name: 'Display',
    properties: {
      'Panel Type': 'IPS',
      'Size': '15.4"',
      'Aspect Ratio': '16:10',
      'Native Resolution': '2880×1800',
      'Touchscreen': '—',
      'Finish': 'Glossy',
      'Brightness': '500&nbsp;cd/m<sup>2</sup>'
      }
    }, {
    name: 'Drives',
    properties: {
      'Available Slots': '—',
      'Total Capacity': '256&nbsp;GB',
      'Solid State Storage': '1 × 256&nbsp;GB&nbsp;Integrated PCIe',
      'Optical Drive': '—'
      }
    }, {
    name: 'Input/ Output Connectors',
    properties: {
      'Ports': '4 × Thunderbolt 3&nbsp;via USB Type-C',
      'Display': '4 × DisplayPort&nbsp;via Type-C',
      'Audio': '1 × 1/8" (3.5&nbsp;mm) Headphone Output,<br>2 × Integrated Speaker,<br>3 × Integrated Microphone',
      'Expansion Slots': '—',
      'Media Card Slots': '—'
      }
    }, {
    name: 'Communications',
    properties: {
      'Network': '—',
      'Modem': '—',
      'Wi-Fi': '802.11ac; Dual-Band',
      'Bluetooth': 'Bluetooth 4.2',
      'Mobile Broadband': '—',
      'GPS': 'Not Specified by Manufacturer',
      'NFC': 'Not Specified by Manufacturer',
      'Webcam': 'User-Facing: 720p Video'
      }
    }, {
    name: 'Battery',
    properties: {
      'Battery Chemistry': 'Lithium-Ion Polymer',
      'Watt Hours / Type': '76&nbsp;Wh&nbsp;Non-Removable',
      'Maximum Runtime': '10&nbsp;Hours',
      'Power Requirements': '100-240&nbsp;VAC, 50-60&nbsp;Hz',
      'Power Supply': '1 × 87&nbsp;W',
      }
    }, {
    name: 'General',
    properties: {
      'Operating System': 'macOS High Sierra',
      'Security': 'Not specified',
      'Keyboard': 'Keys: 64,<br>Type: Standard Notebook Keyboard,<br>Features: Backlight',
      'Pointing Device': 'Force Touch Trackpad',
      'Dimensions (W × H × D)': '13.8 × 0.6 × 9.5"&nbsp;/&nbsp;35.1 × 1.5 × 24.1&nbsp;cm',
      'Weight': '4.02&nbsp;lb&nbsp;/&nbsp;1.82&nbsp;kg',
      }
    }, {
    name: 'Packaging Info',
    properties: {
      'Package Weight': '7.55&nbsp;lb',
      'Box Dimensions (L × W × H)': '16.2 × 11.6 × 3.7"'
      }
    }],
    reviews: [{
      author: 'Thomas Bruns',
      date: 'May 21, 2018',
      text: '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>',
      likes: 14,
      dislikes: 2
    }, {
      author: 'George Clanton',
      date: 'May 24, 2018',
      text: '<p>Nunc interdum odio non erat commodo lacinia. Aliquam nec tincidunt lorem. Nunc quis scelerisque nulla. Nam nulla ante, luctus non dignissim a, luctus quis sem. Curabitur consectetur porttitor leo. Donec molestie nisl vitae lorem porttitor vehicula. Etiam feugiat a magna ac dapibus. Donec vitae sollicitudin lectus.</p><p>Sed mollis ex tincidunt posuere blandit. Mauris sed tellus dolor. Suspendisse nibh mi, dignissim et molestie id, dictum in arcu. Duis sodales scelerisque quam, quis lobortis felis egestas eu. Sed nibh nulla, aliquet ac leo vel, rutrum dignissim metus. Sed non rhoncus ex. Curabitur accumsan porta lacus non viverra. Etiam feugiat sapien ut purus luctus, eu porttitor neque volutpat.</p>',
      likes: 5,
      dislikes: 0
    }],
    questions: [{
      question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit?',
      answer: 'Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam.'
    }, {
      question: 'Nullam massa sem, mollis ut luctus at, tincidunt a lorem?',
      answer: 'Aliquam sed dictum elit, quis consequat metus. Proin in mauris finibus urna lacinia laoreet sed id orci.'
    }, {
      question: 'Aliquam pretium diam et ullamcorper malesuada?',
      answer: 'Praesent feugiat lectus faucibus tellus congue pharetra. In viverra vehicula pellentesque. Etiam consectetur ultricies magna at bibendum.'
    }, {
      question: 'Nulla fringilla sollicitudin mauris eu volutpat?',
      answer: 'Mauris quis neque nec lectus aliquet malesuada. Nunc ullamcorper purus id gravida aliquam. Integer eget blandit urna.'
    }, {
      question: 'Nam luctus velit ante, id pulvinar nisl gravida eget?',
      answer: 'Vestibulum gravida nisi tempor malesuada iaculis. Phasellus finibus, nisl quis pellentesque scelerisque, erat erat mollis massa, eu semper diam eros id risus. Cras vitae nisi porta.'
    }],
    isNotAvailable: false,
    isOnSale: true,
    isAddedToCart: true,
    isAddedToFavorites: true,
    isAddedToCompare: true,
    statuses: ['top selling', 'trade-in'],
    properties: {
      'Diagonal display': '15.4"',
      'CPU': 'Intel®&nbsp;Core™ i7',
      'RAM': '16&nbsp;GB',
      'Video Card': 'AMD Radeon Pro 555'
    }
  }, {
    id: 2,
    name: 'Apple MacBook 12" MNYN2LL/A 512GB (Rose Gold)',
    type: 'Laptop',
    href: 'product.html',
    image: {
      small: 'images/products/2/2-small.jpg',
      medium: 'images/products/2/2-medium.jpg',
      large: 'images/products/2/2-large.jpg'
    },
    additionalImages: [],
    price: '$1549.00',
    oldPrice: '',
    brand: {},
    variations: [],
    specifications: [],
    reviews: [],
    questions: [],
    isNotAvailable: false,
    isOnSale: false,
    isAddedToCart: true,
    isAddedToFavorites: true,
    isAddedToCompare: true,
    statuses: ['new', 'trade-in'],
    properties: {
      'Diagonal display': '12"',
      'CPU': 'Intel®&nbsp;Core™ i5',
      'RAM': '8&nbsp;GB',
      'Video Card': 'Intel® HD Graphics 615'
    }
  }, {
    id: 3,
    name: 'Lenovo IdeaPad YOGA 920-13IKB 80Y7001RRK (Copper)',
    type: 'Laptop',
    href: 'product.html',
    image: {
      small: 'images/products/3/3-small.jpg',
      medium: 'images/products/3/3-medium.jpg',
      large: 'images/products/3/3-large.jpg'
    },
    additionalImages: [],
    price: '$1199.00',
    oldPrice: '',
    brand: {},
    variations: [],
    specifications: [],
    reviews: [],
    questions: [],
    isNotAvailable: false,
    isOnSale: false,
    isAddedToCart: false,
    isAddedToFavorites: true,
    isAddedToCompare: false,
    statuses: '',
    properties: {
      'Diagonal display': '13.9"',
      'CPU': 'Intel®&nbsp;Core™ i7 8550U',
      'RAM': '16&nbsp;GB',
      'Video Card': 'Intel® HD Graphics 620'
    }
  }, {
    id: 4,
    name: 'ASUS Zenbook UX330UA-FC020T (Rose Gold)',
    type: 'Laptop',
    href: 'product.html',
    image: {
      small: 'images/products/4/4-small.jpg',
      medium: 'images/products/4/4-medium.jpg',
      large: 'images/products/4/4-large.jpg'
    },
    additionalImages: [],
    price: '$749.00',
    oldPrice: '',
    brand: {},
    variations: [],
    specifications: [],
    reviews: [],
    questions: [],
    isNotAvailable: false,
    isOnSale: false,
    isAddedToCart: false,
    isAddedToFavorites: false,
    isAddedToCompare: false,
    statuses: ['top selling'],
    properties: {
      'Diagonal display': '13.3"',
      'CPU': 'Intel®&nbsp;Core™ i7-6500U',
      'RAM': '8&nbsp;GB',
      'Video Card': 'Intel® HD Graphics 520'
    }
  }, {
    id: 5,
    name: 'Dell XPS 15 9560-8968 (Silver)',
    type: 'Laptop',
    href: 'product.html',
    image: {
      small: 'images/products/5/5-small.jpg',
      medium: 'images/products/5/5-medium.jpg',
      large: 'images/products/5/5-large.jpg'
    },
    additionalImages: [],
    price: '$949.00',
    oldPrice: '$999.00',
    brand: {},
    variations: [],
    specifications: [],
    reviews: [],
    questions: [],
    isNotAvailable: false,
    isOnSale: true,
    isAddedToCart: false,
    isAddedToFavorites: false,
    isAddedToCompare: false,
    statuses: '',
    properties: {
      'Diagonal display': '15.6"',
      'CPU': 'Intel®&nbsp;Core™ i7 7700HQ',
      'RAM': '16&nbsp;GB',
      'Video Card': 'NVIDIA GeForce GTX 960M'
    }
  }, {
    id: 6,
    name: 'Apple MacBook Air 13" MQD32LL/A 128GB (Silver)',
    type: 'Laptop',
    href: 'product.html',
    image: {
      small: 'images/products/6/6-small.jpg',
      medium: 'images/products/6/6-medium.jpg',
      large: 'images/products/6/6-large.jpg'
    },
    additionalImages: [],
    price: '$849.00',
    oldPrice: '',
    brand: {},
    variations: [],
    specifications: [],
    reviews: [],
    questions: [],
    isNotAvailable: false,
    isOnSale: false,
    isAddedToCart: false,
    isAddedToFavorites: false,
    isAddedToCompare: true,
    statuses: ['trade-in'],
    properties: {
      'Diagonal display': '13.3"',
      'CPU': 'Intel®&nbsp;Core™ i5',
      'RAM': '8&nbsp;GB',
      'Video Card': 'Intel® HD Graphics 6000'
    }
  }, {
    id: 7,
    name: 'Dell Inspiron 5378-2063 (Gray)',
    type: 'Laptop',
    href: 'product.html',
    image: {
      small: 'images/products/7/7-small.jpg',
      medium: 'images/products/7/7-medium.jpg',
      large: 'images/products/7/7-large.jpg'
    },
    additionalImages: [],
    price: '$579.00',
    oldPrice: '$599.00',
    brand: {},
    variations: [],
    specifications: [],
    reviews: [],
    questions: [],
    isNotAvailable: false,
    isOnSale: true,
    isAddedToCart: false,
    isAddedToFavorites: false,
    isAddedToCompare: false,
    statuses: '',
    properties: {
      'Diagonal display': '13.3"',
      'CPU': 'Intel®&nbsp;Core™ i3-7100U',
      'RAM': '4&nbsp;GB',
      'HDD Capacity': '1&nbsp;TB'
    }
  }, {
    id: 8,
    name: 'Lenovo Yoga 720-13IKB 80X60059RK (Silver)',
    type: 'Laptop',
    href: 'product.html',
    image: {
      small: 'images/products/8/8-small.jpg',
      medium: 'images/products/8/8-medium.jpg',
      large: 'images/products/8/8-large.jpg'
    },
    additionalImages: [],
    price: '$1099.00',
    oldPrice: '',
    brand: {},
    variations: [],
    specifications: [],
    reviews: [],
    questions: [],
    isNotAvailable: false,
    isOnSale: false,
    isAddedToCart: false,
    isAddedToFavorites: false,
    isAddedToCompare: false,
    statuses: ['new'],
    properties: {
      'Diagonal display': '13.3"',
      'CPU': 'Intel®&nbsp;Core™ i5-7200U',
      'RAM': '8&nbsp;GB',
      'Video Card': 'Intel® HD Graphics 620'
    }
  }, {
    id: 9,
    name: 'Lenovo ThinkPad X380 Yoga 20LH000MUS (Black)',
    type: 'Laptop',
    href: 'product.html',
    image: '',
    additionalImages: [],
    price: '$2239.00',
    oldPrice: '',
    brand: {},
    variations: [],
    specifications: [],
    reviews: [],
    questions: [],
    isNotAvailable: true,
    isOnSale: false,
    isAddedToCart: false,
    isAddedToFavorites: false,
    isAddedToCompare: false,
    statuses: '',
    properties: {
      'Diagonal display': '13.3"',
      'CPU': 'Intel®&nbsp;Core™ i7 8550U',
      'RAM': '4&nbsp;GB',
      'Video Card': 'Intel® UHD Graphics 620'
    }
  }]

  var filters = [{
    id: 1,
    name: 'brand',
    title: 'Brands',
    isOpen: true,
    items: [{
      id: 1,
      name: 'Acer',
      quantity: 177
    }, {
      id: 2,
      name: 'Apple',
      quantity: 18
    }, {
      id: 3,
      name: 'ASUS',
      quantity: 150
    }, {
      id: 4,
      name: 'Dell',
      quantity: 170
    }, {
      id: 5,
      name: 'HP',
      quantity: 498
    }, {
      id: 6,
      name: 'MSI',
      quantity: 54
    }, {
      id: 7,
      name: 'Samsung',
      quantity: 1
    }, {
      id: 8,
      name: 'Sony',
      quantity: 1
    }]
  }, {
    id: 2,
    name: 'type',
    title: 'Type',
    description: 'A small description for this property',
    isOpen: true,
    items: [{
      id: 1,
      name: 'Notebook',
      quantity: 150
    }, {
      id: 2,
      name: 'Ultrabook',
      quantity: 18
    }, {
      id: 3,
      name: 'Transformer',
      quantity: 6
    }]
  }, {
    id: 3,
    name: 'screen-size',
    title: 'Screen Size',
    description: 'A small description for this property',
    isOpen: false,
    items: [{
      id: 1,
      name: '11.6" and smaller',
      quantity: 45
    }, {
      id: 2,
      name: '12" - 13.5"',
      quantity: 178
    }, {
      id: 3,
      name: '14" - 14.5"',
      quantity: 461
    }, {
      id: 4,
      name: '15" - 15.6"',
      quantity: 148
    }, {
      id: 5,
      name: '17" - 17.3"',
      quantity: 73
    }, {
      id: 6,
      name: '18.4" and larger',
      quantity: 54
    }]
  }, {
    id: 3,
    name: 'screen-resolution',
    title: 'Screen Resolution',
    description: 'A small description for this property',
    isOpen: false,
    items: [{
      id: 1,
      name: '3840×2160',
      quantity: 12
    }, {
      id: 2,
      name: '3200×1800"',
      quantity: 12
    }, {
      id: 3,
      name: '2880×1800',
      quantity: 10
    }, {
      id: 4,
      name: '2560×1600',
      quantity: 7
    }, {
      id: 5,
      name: '2560×1440',
      quantity: 13
    }, {
      id: 6,
      name: '1920×1080',
      quantity: 341
    }, {
      id: 7,
      name: '1600×900',
      quantity: 11
    }, {
      id: 8,
      name: '1440×900',
      quantity: 13
    }, {
      id: 9,
      name: '1366×768',
      quantity: 237
    }, {
      id: 10,
      name: '1024×600',
      quantity: 5
    }]
  }, {
    id: 4,
    name: 'cpu',
    title: 'CPU',
    description: 'A small description for this property',
    isOpen: false,
    items: [{
      id: 1,
      name: 'AMD A-series',
      quantity: 102
    }, {
      id: 2,
      name: 'AMD E-series',
      quantity: 21
    }, {
      id: 3,
      name: 'AMD FX',
      quantity: 1
    }, {
      id: 4,
      name: 'AMD Ryzen',
      quantity: 1
    }, {
      id: 5,
      name: 'Intel Atom',
      quantity: 8
    }, {
      id: 6,
      name: 'Intel Celeron',
      quantity: 38
    }, {
      id: 7,
      name: 'Intel Core M',
      quantity: 6
    }, {
      id: 8,
      name: 'Intel Core i3',
      quantity: 143
    }, {
      id: 9,
      name: 'Intel Core i5',
      quantity: 273
    }, {
      id: 10,
      name: 'Intel Core i7',
      quantity: 218
    }, {
      id: 11,
      name: 'Intel Xeon',
      quantity: 3
    }, {
      id: 12,
      name: 'Intel Pentium',
      quantity: 86
    }]
  }, {
    id: 5,
    name: 'ram',
    title: 'RAM',
    description: 'A small description for this property',
    isOpen: false,
    items: [{
      id: 1,
      name: '2 GB',
      quantity: 17
    }, {
      id: 2,
      name: '4 GB',
      quantity: 359
    }, {
      id: 3,
      name: '6 GB',
      quantity: 81
    }, {
      id: 4,
      name: '8 GB',
      quantity: 346
    }, {
      id: 5,
      name: '12 GB',
      quantity: 13
    }, {
      id: 6,
      name: '16 GB',
      quantity: 72
    }, {
      id: 7,
      name: '24 GB',
      quantity: 1
    }, {
      id: 8,
      name: '32 GB',
      quantity: 11
    }]
  }]

  var compare = [{
    name: 'Performance',
    properties: {
      'Processor': ['Intel&nbsp;Core i7&nbsp;Quad-Core', 'Intel&nbsp;Core i5&nbsp;Dual-Core', 'Intel&nbsp;Core i5&nbsp;Dual-Core'],
      'Base Clock Speed': ['2.8&nbsp;GHz', '1.3&nbsp;GHz', '1.8&nbsp;GHz'],
      'Maximum Boost Speed': ['3.8&nbsp;GHz', '3.2&nbsp;GHz', '2.9&nbsp;GHz'],
      'Total Installed Memory': ['16&nbsp;GB', '8&nbsp;GB', '8&nbsp;GB'],
      'Memory Type': ['LPDDR3&nbsp;SDRAM', 'LPDDR3&nbsp;SDRAM', 'LPDDR3&nbsp;SDRAM'],
      'Memory Speed': ['2133&nbsp;MHz', '1866&nbsp;MHz', '1600&nbsp;MHz'],
      'Onboard Memory': ['16&nbsp;GB', '8&nbsp;GB', '8&nbsp;GB'],
      'Available Memory Slots': ['—', '—', '—'],
      'Graphics Type': ['Hybrid', 'Integrated', 'Integrated'],
      'GPU': ['AMD Radeon&nbsp;Pro 555 with 2&nbsp;GB&nbsp;GDDR5 VRAM,<br>Intel HD Graphics&nbsp;630',
              'Intel HD Graphics&nbsp;615',
              'Intel HD Graphics&nbsp;6000']
    }
  }, {
    name: 'Display',
    properties: {
      'Graphics Type': ['IPS', 'IPS', 'Not specified'],
      'Size': ['15.4"', '12"', '13.3"'],
      'Aspect Ratio': ['16:10', '16:10', '16:10'],
      'Native Resolution': ['2880×1800', '2304×1440', '1440×900'],
      'Touchscreen': ['—', '—', '—'],
      'Finish': ['Glossy', 'Glossy', 'Glossy'],
      'Brightness': ['500&nbsp;cd/m<sup>2</sup>', 'Not specified', 'Not specified'],
      'Viewing Angle': ['Not specified', 'Not specified', 'Not specified'],
      'Refresh Rate': ['Not specified', 'Not specified', 'Not specified'],
      'Response Time': ['Not specified', 'Not specified', 'Not specified'],
      'Adaptive Sync Technology': ['Not specified', 'Not specified', 'Not specified'],
      'External Resolution': ['Not specified', 'Not specified', 'Not specified']
    }
  }, {
    name: 'Drives',
    properties: {
      'Available Slots': ['—', '—', '—'],
      'Total Capacity': ['256&nbsp;GB', '512&nbsp;GB', '128&nbsp;GB'],
      'Solid State Storage': ['1 × 256&nbsp;GB&nbsp;Integrated PCIe',
                              '1 × 512&nbsp;GB&nbsp;Integrated PCIe',
                              '1 × 128&nbsp;GB&nbsp;Integrated PCIe'],
      'Optical Drive': ['—', '—', '—']
    }
  }, {
    name: 'Input/ Output Connectors',
    properties: {
      'Ports': ['4 × Thunderbolt 3&nbsp;via USB Type-C',
                '1 × USB 3.1 Gen 1&nbsp;Type-C',
                '2 × USB 3.1 Gen 1&nbsp;Type-A,<br>1 × Thunderbolt 2'],
      'Display': ['4 × DisplayPort&nbsp;via Type-C',
                  '1 × DisplayPort&nbsp;1.2&nbsp;via Optional Cable,<br>1 × HDMI&nbsp;via Optional Cable,<br>1 × VGA&nbsp;via Optional Cable',
                  '1 × Mini DisplayPort&nbsp;via Thunderbolt Port'],
      'Audio': ['1 × 1/8" (3.5&nbsp;mm) Headphone Output,<br>2 × Integrated Speaker,<br>3 × Integrated Microphone',
                '1 × 1/8" (3.5&nbsp;mm) Headphone Output,<br>2 × Integrated Speaker,<br>2 × Integrated Microphone',
                '1 × 1/8" (3.5&nbsp;mm) Headphone Output,<br>2 × Integrated Speaker,<br>2 × Integrated Microphone'],
      'Expansion Slots': ['—', '—', '—'],
      'Media Card Slots': ['—', '—', 'SD/SDHC/SDXC']
    }
  }, {
    name: 'Communications',
    properties: {
      'Network': ['—', '—', '—'],
      'Modem': ['—', '—', '—'],
      'Wi-Fi': ['802.11ac; Dual-Band', '802.11ac; Dual-Band', '802.11ac; Dual-Band'],
      'Bluetooth': ['Bluetooth 4.2', 'Bluetooth 4.2', 'Bluetooth 4.0'],
      'Mobile Broadband': ['—', '—', '—'],
      'GPS': ['Not specified', '—', 'Not specified'],
      'NFC': ['Not specified', '—', 'Not specified'],
      'Webcam': ['User-Facing: 720p Video', 'User-Facing: 480p Video', 'User-Facing: 720p Video'],
    }
  }, {
    name: 'Battery',
    properties: {
      'Battery Chemistry': ['Lithium-Ion Polymer', 'Lithium-Ion Polymer', 'Lithium-Ion Polymer'],
      'Watt Hours / Type': ['76&nbsp;Wh&nbsp;Non-Removable', '41.4&nbsp;Wh&nbsp;Non-Removable', '54&nbsp;Wh&nbsp;Non-Removable'],
      'Cells': ['Not specified', 'Not specified', 'Not specified'],
      'Output Voltage': ['Not specified', 'Not specified', 'Not specified'],
      'Maximum Runtime': ['10&nbsp;Hours', '10&nbsp;Hours', '12&nbsp;Hours'],
      'Power Requirements': ['100-240&nbsp;VAC, 50-60&nbsp;Hz', '100-240&nbsp;VAC, 50-60&nbsp;Hz', '100-240&nbsp;VAC, 50-60&nbsp;Hz'],
      'Power Supply': ['1 × 87&nbsp;W', '1 × 29&nbsp;W', '1 × 45&nbsp;W'],
    }
  }, {
    name: 'General',
    properties: {
      'Operating System': ['macOS High Sierra', 'macOS High Sierra', 'macOS High Sierra'],
      'Security': ['Not specified', 'Not specified', 'Not specified'],
      'Keyboard': ['Keys: 64,<br>Type: Standard Notebook Keyboard,<br>Features: Backlight',
                   'Keys: 78,<br>Type: Standard Notebook Keyboard,<br>Features: Backlight',
                   'Keys: 78,<br>Type: Standard Notebook Keyboard,<br>Features: Backlight'],
      'Pointing Device': ['Force Touch Trackpad', 'Force Touch Trackpad', 'TouchPad'],
      'Dimensions (W × H × D)': ['13.8 × 0.6 × 9.5"&nbsp;/&nbsp;35.1 × 1.5 × 24.1&nbsp;cm',
                                 '11.0 × 0.5 × 7.7"&nbsp;/&nbsp;27.9 × 1.3 × 19.6&nbsp;cm',
                                 '12.8 × 0.7 × 8.9"&nbsp;/&nbsp;32.5 × 1.8 × 22.6&nbsp;cm'],
      'Weight': ['4.02&nbsp;lb&nbsp;/&nbsp;1.82&nbsp;kg', '2.03&nbsp;lb&nbsp;/&nbsp;.92&nbsp;kg', '2.96&nbsp;lb&nbsp;/&nbsp;1.34&nbsp;kg'],
      'Warranty Length': ['Limited 1-Year Warranty', 'Limited 1-Year Warranty', 'Limited 1-Year Warranty']
    }
  }]

  var articles = [{
    title: 'Everything You Need to Know About the MacBook Pro',
    description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales eget ipsum id aliquam. Nam consectetur interdum nibh eget sodales. Cras volutpat efficitur ornare.</p>',
    preview: 'images/articles/macbook-photo.jpg',
    date: 'May 21, 2018',
    href: 'article.html'
  }, {
    title: 'Apple introduces macOS Mojave',
    description: '<p>Praesent consequat justo eu massa malesuada posuere. Donec ultricies tincidunt nisl, sed euismod nulla venenatis maximus. Maecenas sit amet semper tellus. Pellentesque imperdiet finibus sapien, a consectetur eros auctor a.</p>',
    preview: 'images/articles/macos.jpg',
    date: 'May 21, 2018',
    href: 'article.html'
  }]

  var news = [{
    title: 'Highlights from WWDC',
    description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales eget ipsum id aliquam. Nam consectetur interdum nibh eget sodales. Cras volutpat efficitur ornare.</p>',
    date: 'June 4, 2018',
    href: 'article.html'
  }, {
    title: 'Apple introduces macOS Mojave',
    description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales eget ipsum id aliquam. Nam consectetur interdum nibh eget sodales. Cras volutpat efficitur ornare.</p>',
    date: 'June 4, 2018',
    href: 'article.html'
  }, {
    title: 'iOS 11.4 brings stereo pairs and multi-room audio with AirPlay 2',
    description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales eget ipsum id aliquam. Nam consectetur interdum nibh eget sodales. Cras volutpat efficitur ornare.</p>',
    date: 'May 29, 2018',
    href: 'article.html'
  }]

  var profile = {
    firstName: 'Thomas',
    lastName: 'Bruns',
    image: 'images/avatar.jpg',
    registrationDate: 'June 6, 2018',
    phone: '8 (800) 555-35-35',
    dateOFBirth: '1990-01-01',
    email: 'example@example.com'
  }

  var profileNav = [{
    id: 1,
    title: 'Orders',
    amount: 2,
    href: 'account.html'
  }, {
    id: 2,
    title: 'Favorites',
    amount: 3,
    href: 'favorites.html'
  }, {
    id: 3,
    title: 'Personal Info',
    href: 'personal.html'
  }]

  var orders = [{
    id: '36637649',
    date: 'June 17, 2018',
    items: 7,
    shipping: 'Pick up from store',
    payment: 'Online by card',
    total: '$4896.00',
    status: 'Processing'
  }, {
    id: '36637648',
    date: 'June 16, 2018',
    items: 2,
    shipping: 'Pick up from store',
    payment: 'Online by card',
    total: '$599.00',
    status: 'Canceled'
  }]

  var informationalNav = [{
    id: 1,
    title: 'About',
    href: 'about.html'
  }, {
    id: 2,
    title: 'Contacts',
    href: 'contacts.html'
  }, {
    id: 3,
    title: 'Blog',
    href: 'blog.html'
  }, {
    id: 4,
    title: 'News',
    href: 'news.html'
  }, {
    id: 5,
    title: 'FAQ',
    href: 'faq.html'
  }, {
    id: 6,
    title: 'Delivery',
    href: 'delivery.html'
  }]

  var promo = [{
    background: '#0b0a12',
    image: 'images/promo/macbook-new.jpg',
    title: 'New Macbook'
  }, {
    background: '#ce071e',
    image: 'images/promo/iphone.jpg',
    title: 'iPhone'
  }, {
    background: '#1f2024',
    image: 'images/promo/ipad.jpg',
    title: 'iPad'
  }]

  var categories = [{
    title: 'Laptops',
    href: 'subcategory.html',
    comment: 'from $149',
    image: 'images/catalog/laptops.png'
  }, {
    title: 'Smartphones',
    href: 'subcategory.html',
    comment: 'from $99',
    image: 'images/catalog/smartphones.png'
  }, {
    title: 'Tablets',
    href: 'subcategory.html',
    comment: 'from $129',
    image: 'images/catalog/tablets.png'
  }, {
    title: 'Smart Watches',
    href: 'subcategory.html',
    comment: 'from $49',
    image: 'images/catalog/watches.png'
  }, {
    title: 'Gaming Consoles',
    href: 'subcategory.html',
    comment: 'from $399',
    image: 'images/catalog/consoles.png'
  }, {
    title: 'Cameras',
    href: 'subcategory.html',
    comment: 'from $129',
    image: 'images/catalog/cameras.png'
  }]

  var advantages = [{
    title: 'Mauris placerat',
    description: 'Donec mollis nibh dolor, sit amet auctor',
    icon: 'star'
  }, {
    title: 'Lorem ipsum',
    description: 'Sit amet, consectetur adipiscing elit',
    icon: 'receiver'
  }, {
    title: 'Proin pharetra',
    description: 'Nec quam a fermentum ut viverra',
    icon: 'location'
  }, {
    title: 'Praesent ultrices',
    description: 'Praesent ultrices, orci nec finibus',
    icon: 'comments'
  }, {
    title: 'Duis condimentum',
    description: 'Pellentesque eget varius arcu',
    icon: 'happy'
  }]




================================================
FILE: src/templates/layouts/_account.pug
================================================
extends _default

block vars

block default
  section.uk-section.uk-section-small
    div.uk-container
      div.uk-grid-medium(uk-grid)

        //- Profile column
        div(class="uk-width-1-1 uk-width-1-4@m tm-aside-column")
          div.uk-card.uk-card-default.uk-card-small.tm-ignore-container(
            uk-sticky="offset: 90; bottom: true; media: @m;")

            //- Profile
            div.uk-card-header
              div.uk-grid-small.uk-child-width-1-1(uk-grid)

                section
                  div(class="uk-width-1-3 " +
                            "uk-width-1-4@s " +
                            "uk-width-1-2@m " +
                            "uk-margin-auto " +
                            "uk-visible-toggle " +
                            "uk-position-relative " +
                            "uk-border-circle " +
                            "uk-overflow-hidden " +
                            "uk-light")
                    img.uk-width-1-1(src= profile.image)
                    a(class="uk-link-reset " +
                            "uk-overlay-primary " +
                            "uk-position-cover " +
                            "uk-hidden-hover"
                      href="#")
                      div.uk-position-center
                        +icon("camera", "1.25")

                div.uk-text-center
                  div.uk-h4.uk-margin-remove #{profile.firstName} #{profile.lastName}
                  div.uk-text-meta Joined #{profile.registrationDate}

                div
                  div.uk-grid-small.uk-flex-center(uk-grid)

                    div
                      a.uk-button.uk-button-default.uk-button-small(href="settings.html")
                        +icon("cog", ".75")(class="uk-margin-xsmall-right")
                        span Settings

                    div
                      button.uk-button.uk-button-default.uk-button-small(
                        href="#"
                        title="Log out")
                        +icon("sign-out", ".75")

            div
              nav
                ul.uk-nav.uk-nav-default.tm-nav
                  each item in profileNav
                    li(class= {"uk-active": item.id == profileActivePage})
                      a(href= item.href)= item.title
                        if item.amount
                          |
                          |
                          span (#{item.amount})

        //- Content column
        div(class="uk-width-1-1 uk-width-expand@m")
          div.uk-card.uk-card-default.uk-card-small.tm-ignore-container

            header.uk-card-header
              h1.uk-h2= page.title
            block account

================================================
FILE: src/templates/layouts/_article.pug
================================================
extends _default

block vars

block default
  section.uk-section.uk-section-small
    div.uk-container
      div.uk-grid-medium.uk-child-width-1-1(uk-grid)

        section.uk-text-center

          if page.breadcrumbs
            ul.uk-breadcrumb.uk-flex-center.uk-margin-remove

              li: a(href="index.html") Home

              each href, breadcrumb in page.breadcrumbs
                li: a(href= href)= breadcrumb

              if page.title
                li: span= page.title

        section
          block article

================================================
FILE: src/templates/layouts/_checkout.pug
================================================
extends _index

block vars

block index

  header
    div.uk-navbar-container.tm-navbar-container
      div.uk-container(uk-navbar)

        div.uk-navbar-left
          //- Logo
          a.uk-navbar-item.uk-logo(href="index.html")
            img(src="images/logo.svg" width="90" height="32" alt="Logo")

        div.uk-navbar-right
          //- Phone
          a.uk-navbar-item.uk-link-muted(href="#")
            +icon("receiver", ".75")(class="uk-margin-xsmall-right")
            span.tm-pseudo= shopInfo.phone


  main
    section.uk-section.uk-section-small
      div.uk-container
        div.uk-grid-medium.uk-child-width-1-1(uk-grid)

          section.uk-text-center
            a.uk-link-muted.uk-text-small(href="cart.html")
              +icon("arrow-left", ".75")(class="uk-margin-xsmall-right")
              | Return to cart
            h1.uk-margin-small-top.uk-margin-remove-bottom Checkout

          section
            block checkout

  footer
    div.uk-section.uk-section-secondary.uk-section-small.uk-light
      div.uk-container
        div.uk-flex-middle(uk-grid)

          div.uk-width-expand
            div © Company Name. All rights reserved

          div
            a.uk-link-muted(href="#")
              +icon("receiver", ".75")(class="uk-margin-xsmall-right")
              span.tm-pseudo= shopInfo.phone

================================================
FILE: src/templates/layouts/_default.pug
================================================
extends _index

block vars

block index

  header
    include ../partials/_header

  main

    block default

    //- Advantages
    section.uk-section.uk-section-default.uk-section-small
      div.uk-container
        div(uk-slider)
          ul(class="uk-slider-items " +
                   "uk-child-width-1-1 " +
                   "uk-child-width-1-2@s " +
                   "uk-child-width-1-5@m " +
                   "uk-grid")
            each advantage in advantages
              li
                div(class="uk-grid-small uk-flex-center uk-flex-left@s" uk-grid)
                  div
                    +icon(advantage.icon, "2.5")
                  div(class="uk-text-center uk-text-left@s uk-width-expand@s")
                    div= advantage.title
                    div.uk-text-meta= advantage.description
          ul.uk-slider-nav.uk-dotnav.uk-flex-center.uk-margin-medium-top

  footer
    include /partials/_footer

  include ../partials/_nav-offcanvas
  include ../partials/_cart-offcanvas


================================================
FILE: src/templates/layouts/_index.pug
================================================
include ../data/_data
include ../mixins/_import

doctype html

//- Variables
block vars
  - var page

//- Template
html(lang="en")
  head
    include /partials/_head
    link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500")
    link(rel="stylesheet" href="styles/style.css")
    script(src="scripts/uikit.js")
    script(src="scripts/uikit-icons.js")

  body
    div.uk-offcanvas-content
      block index

    script(src="scripts/script.js")
    script(src="//maps.googleapis.com/maps/api/js?key=AIzaSyClyjCemJi4m2q78gNeGkhlckpdH1hzTYA&callback=initMap"
           async
           defer)

================================================
FILE: src/templates/layouts/_informational.pug
================================================
extends /layouts/_pages

block vars

block pages
  div.uk-grid-medium(uk-grid)

    //- Content
    section(class="uk-width-1-1 uk-width-expand@m")
      block informational

    //- Navigation
    aside(class="uk-width-1-4 uk-visible@m tm-aside-column")
      section(class="uk-card " +
                    "uk-card-default " +
                    "uk-card-small"
              uk-sticky="offset: 90; bottom: true;")
        nav
          ul.uk-nav.uk-nav-default.tm-nav
            each item in informationalNav
              li(class= {"uk-active": item.id == informationalActivePage})
                a(href= item.href)= item.title

================================================
FILE: src/templates/layouts/_pages.pug
================================================
extends _default

block vars

block default
  section.uk-section.uk-section-small
    div.uk-container
      div.uk-grid-medium.uk-child-width-1-1(uk-grid)

        div.uk-text-center
          if page.breadcrumbs
            ul.uk-breadcrumb.uk-flex-center.uk-margin-remove
              li: a(href="index.html") Home
              each href, breadcrumb in page.breadcrumbs
                li: a(href= href)= breadcrumb
              if page.title
                li: span= page.title
          if page.title
            h1.uk-margin-small-top.uk-margin-remove-bottom= page.title
          if page.quantity
            div.uk-text-meta.uk-margin-xsmall-top #{page.quantity} items

        div
          block pages

================================================
FILE: src/templates/mixins/_article.pug
================================================
mixin article(article)

  a(href= article.href)
    article(class="uk-card " +
                  "uk-card-default " +
                  "uk-card-small " +
                  "uk-article " +
                  "uk-overflow-hidden " +
                  "uk-box-shadow-hover-large " +
                  "uk-height-1-1 " +
                  "tm-ignore-container")

      //- Preview
      if article.preview
        div.tm-ratio.tm-ratio-16-9
          figure.tm-media-box.uk-cover-container.uk-margin-remove
            img(src= article.preview
                alt= article.title
                uk-cover)

      div.uk-card-body
        div.uk-article-body
          //- Date
          div.uk-article-meta.uk-margin-xsmall-bottom
            time= article.date
          //- Title
          div
            h3.uk-margin-remove= article.title
          //- Description
          if article.description
            div.uk-margin-small-top!= article.description

================================================
FILE: src/templates/mixins/_icon.pug
================================================
mixin icon(name, ratio)

  if !ratio
    span(uk-icon= name)&attributes(attributes)
  else
    span(uk-icon=`icon: ${name}; ratio: ${ratio};`)&attributes(attributes)

================================================
FILE: src/templates/mixins/_import.pug
================================================
include _icon
include _link-to-all
include _product
include _quantity
include _product-small
include _article

================================================
FILE: src/templates/mixins/_link-to-all.pug
================================================
mixin link-to-all(text, href)

  a.uk-link-muted.uk-text-uppercase.tm-link-to-all(href= href)&attributes(attributes)
    span= text
    +icon("chevron-right", ".75")

================================================
FILE: src/templates/mixins/_product-small.pug
================================================
mixin product-small(product)

  div.uk-grid-small.uk-height-1-1(uk-grid)

    //- Image
    div.uk-width-1-3
      div.tm-ratio.tm-ratio-4-3
        a.tm-media-box(href= product.href)
          figure.tm-media-box-wrap
            if product.image
              img(src= product.image.small alt= product.name)
            else
              +icon("image", "3")(class="uk-text-muted")

    //- Info
    div.uk-width-expand
      div.tm-product-card-body.uk-padding-remove.uk-height-1-1

        div.tm-product-card-info
          div.uk-text-meta.uk-margin-xsmall-bottom= product.type
          a.tm-product-card-title(href= product.href)= product.name

        div.tm-product-card-shop
          div.tm-product-card-prices
            if product.isNotAvailable
              div.uk-text-muted Product not available
            else
              if product.oldPrice
                del.uk-text-meta= product.oldPrice
              div.tm-product-card-price= product.price
          div.tm-product-card-add
            if !product.isNotAvailable
              button.uk-button.uk-button-primary.tm-product-card-add-button.tm-shine.js-add-to-cart
                +icon("cart")(class="tm-product-add-button-icon")
                span.tm-product-card-add-button-text add to cart

================================================
FILE: src/templates/mixins/_product.pug
================================================
mixin product(product)

  article.tm-product-card

    //- Media
    div.tm-product-card-media
      div.tm-ratio.tm-ratio-4-3
        a.tm-media-box(href= product.href)

          //- Labels
          if product.statuses
            div.tm-product-card-labels
              each status in product.statuses
                case status
                  when "new"
                    span.uk-label.uk-label-success= status
                  when "top selling"
                    span.uk-label.uk-label-warning= status
                  when "trade-in"
                    span.uk-label.uk-label-danger= status
                  default
                    span.uk-label= status

          //- Image
          figure.tm-media-box-wrap
            if product.image
              img(src= product.image.medium alt= product.name)
            else
              +icon("image", "3")(class="uk-text-muted")

    //- Body
    div.tm-product-card-body

      //- Info
      div.tm-product-card-info

        //- Type
        div.uk-text-meta.uk-margin-xsmall-bottom= product.type

        //- Title
        h3.tm-product-card-title
          a.uk-link-heading(href= product.href)= product.name

        //- Properties
        if product.properties
          ul.uk-list.uk-text-small.tm-product-card-properties
            each value, property in product.properties
              li
                span.uk-text-muted!= property + ": "
                span!= value

      //- Shop
      div.tm-product-card-shop

        //- Prices
        div.tm-product-card-prices
          if product.isNotAvailable
            div.uk-text-muted Product not available
          else
            if product.oldPrice
              del.uk-text-meta= product.oldPrice
            div.tm-product-card-price= product.price

        //- Actions buttons
        div.tm-product-card-add
          div.uk-text-meta.tm-product-card-actions

            //- Favorite
            a.tm-product-card-action.js-add-to.js-add-to-favorites(
              class= { "tm-action-button-active js-added-to": product.isAddedToFavorites }
              title="Add to favorites")
              +icon("heart", ".75")
              span.tm-product-card-action-text Add to favorites

            //- Compare
            a.tm-product-card-action.js-add-to.js-add-to-compare(
              class= { "tm-action-button-active js-added-to": product.isAddedToCompare }
              title="Add to compare")
              +icon("copy", ".75")
              span.tm-product-card-action-text Add to compare

          //- Add to cart
          if !product.isNotAvailable
            button.uk-button.uk-button-primary.tm-product-card-add-button.tm-shine.js-add-to-cart
              +icon("cart")(class="tm-product-card-add-button-icon")
              span.tm-product-card-add-button-text add to cart


================================================
FILE: src/templates/mixins/_quantity.pug
================================================
mixin quantity(productId)
  a(onclick="increment(-1, 'product-" + productId + "')"
    uk-icon="icon: minus; ratio: .75")
  input(id="product-" + productId
        class="uk-input tm-quantity-input"
        type="text"
        maxlength="3"
        value="1")
  a(onclick="increment(+1, 'product-" + productId + "')"
    uk-icon="icon: plus; ratio: .75")

================================================
FILE: src/templates/pages/404.pug
================================================
extends /layouts/_default

block vars
  -
    page = {
      title: '404 — Page not found'
    }

block default
  section.uk-section.uk-section-small
    div.uk-container
      div.uk-text-center
        h1.uk-heading-hero 404
        div.uk-text-lead Page not found
        div.uk-margin-top Looks like the page you're trying to visit doesn't exist.
          br
          a(href="index.html") Go back to Homepage

================================================
FILE: src/templates/pages/about.pug
================================================
extends /layouts/_article

block vars
  -
    page = {
      title: 'About',
      breadcrumbs: {}
    }

block article
  div
    article(class="uk-card " +
                  "uk-card-default " +
                  "uk-card-body " +
                  "uk-article " +
                  "tm-ignore-container")

      header.uk-text-center
        //- Title
        h1.uk-article-title= page.title

      div.uk-article-body
        p.uk-text-lead.uk-text-center Urabitur justo diam, auctor vitae ornare sit amet, accumsan sed neque. Curabitur efficitur lacinia euismod. Nunc dictum sagittis lacus. Etiam ultrices nulla orci, in ultrices risus.
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac tortor sit amet nisi malesuada commodo. Phasellus et tempus justo. Sed iaculis dignissim lacinia. Nulla id felis vel ligula tempus sodales vel a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis neque ac elit lacinia laoreet. Sed dolor sem, rutrum ac egestas non, tempor nec eros. Etiam lobortis porta viverra. Etiam ut suscipit sem, a volutpat mi. Maecenas euismod a lectus ut dapibus. Nulla mattis diam et leo lacinia dignissim.

        h2.uk-text-center Our principles
        ul.uk-list.uk-list-bullet
          li Vestibulum ut mollis est. Fusce iaculis mauris ut tortor convallis sollicitudin. Suspendisse porta nulla nibh, id lacinia lacus tempus ut. Morbi non arcu aliquam, placerat sapien a, luctus diam. Etiam mattis cursus sem, eu maximus nisi bibendum nec. Vivamus ut turpis augue. Phasellus vehicula risus sit amet mi luctus malesuada.
          li Curabitur justo diam, auctor vitae ornare sit amet, accumsan sed neque. Curabitur efficitur lacinia euismod. Nunc dictum sagittis lacus. Etiam ultrices nulla orci, in ultrices risus tincidunt ac. Cras et maximus mauris. Morbi aliquam efficitur maximus. Aenean orci diam, auctor a mattis eu, consectetur id urna.
          li Morbi faucibus mattis ante. Donec varius neque sem, nec convallis mi dictum ut. Duis sit amet massa ac eros luctus egestas. Proin hendrerit aliquam metus, ac tincidunt risus viverra at. In viverra, ligula in facilisis interdum, dui arcu varius purus, eu blandit mi mi ut diam. Phasellus finibus metus sit amet lobortis dapibus. Nunc fringilla ac erat vitae elementum. Donec sagittis odio non mi vestibulum accumsan.

        h2.uk-text-center Our team
        div(class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m"
            uk-grid)
          div
            div.uk-grid-small.uk-flex-middle(uk-grid)
              div
                img(src="images/about/thomas.svg"
                    alt="Thomas Bruns"
                    width="80"
                    height="80")
              div.uk-width-expand
                div Thomas Bruns
                div.uk-text-meta Co-founder & CEO
          div
            div.uk-grid-small.uk-flex-middle(uk-grid)
              div
                img(src="images/about/george.svg"
                    alt="George Clanton"
                    width="80"
                    height="80")
              div.uk-width-expand
                div George Clanton
                div.uk-text-meta Co-founder & President
          div
            div.uk-grid-small.uk-flex-middle(uk-grid)
              div
                img(src="images/about/martin.svg"
                    alt="Martin Cade"
                    width="80"
                    height="80")
              div.uk-width-expand
                div Martin Cade
                div.uk-text-meta Co-founder & CTO
          div
            div.uk-grid-small.uk-flex-middle(uk-grid)
              div
                img(src="images/about/carol.svg"
                    alt="Carol Issa"
                    width="80"
                    height="80")
              div.uk-width-expand
                div Carol Issa
                div.uk-text-meta Former Commercial Director
          div
            div.uk-grid-small.uk-flex-middle(uk-grid)
              div
                img(src="images/about/patricia.svg"
                    alt="Patricia Kirk"
                    width="80"
                    height="80")
              div.uk-width-expand
                div Patricia Kirk
                div.uk-text-meta Former Director of Strategy
          div
            div.uk-grid-small.uk-flex-middle(uk-grid)
              div
                img(src="images/about/nicole.svg"
                    alt="Nicole Yokoyama"
                    width="80"
                    height="80")
              div.uk-width-expand
                div Nicole Yokoyama
                div.uk-text-meta Product Marketing Manager

        h2.uk-text-center Some stats
        div(class="uk-child-width-1-1 uk-child-width-1-3@s uk-text-center"
            uk-grid)
          div
            div.uk-heading-primary.uk-text-warning 5+
            div.uk-margin-small-top years on the market
          div
            div.uk-heading-primary.uk-text-warning 150+
            div.uk-margin-small-top orders per day
          div
            div.uk-heading-primary.uk-text-warning 75000+
            div.uk-margin-small-top clients

        h2.uk-text-center Store
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam.
        figure
          div.uk-text-bolder= shopInfo.storeName
          div!= shopInfo.address
          div= shopInfo.openingHours
        div.tm-wrapper
          figure.tm-ratio.tm-ratio-16-9.js-map(
            data-latitude="59.9356728"
            data-longitude="30.3258604"
            data-zoom="14")

================================================
FILE: src/templates/pages/account.pug
================================================
extends /layouts/_account

block vars
  -
    page = {
      title: 'Orders'
    }

    profileActivePage = 1

block account
  each order in orders
    section.uk-card-body
      h3
        a.uk-link-heading(href="#") ##{order.id}
          |
          |
          span.uk-text-muted.uk-text-small from #{order.date}

      table(class="uk-table " +
                  "uk-table-small " +
                  "uk-table-justify " +
                  "uk-table-responsive " +
                  "uk-table-divider " +
                  "uk-margin-small-top " +
                  "uk-margin-remove-bottom")
        tbody
          tr
            th.uk-width-medium Items
            td= order.items
          tr
            th.uk-width-medium Shipping
            td= order.shipping
          tr
            th.uk-width-medium Payment
            td= order.payment
          tr
            th.uk-width-medium Total
            td= order.total
          tr
            th.uk-width-medium Status
            td: span.uk-label(class= {"uk-label-danger": order.status == "Canceled"})= order.status

================================================
FILE: src/templates/pages/article.pug
================================================
extends /layouts/_article

block vars
  -
    article = articles[0]

    page = {
      title: article.title,
      breadcrumbs: {
        'Blog': 'blog.html'
      }
    }

block article
  div.uk-grid-medium.uk-child-width-1-1(uk-grid)

    //- Article
    section
      article(class="uk-card " +
                    "uk-card-default " +
                    "uk-card-body " +
                    "uk-article " +
                    "tm-ignore-container")
        header.uk-text-center
          //- Title
          h1.uk-article-title= article.title
          //- Date
          div.uk-article-meta
            time= article.date
        section.uk-article-body
          include /partials/_article

    //- Related articles
    section
      h2.uk-text-center Related Articles
      div(class="uk-grid-medium " +
                "uk-grid-match " +
                "uk-child-width-1-1 " +
                "uk-child-width-1-2@s " +
                "uk-child-width-1-4@m"
          uk-grid)
        each article in articles
          div
            a(href= article.href)
              article(class="uk-card " +
                            "uk-card-default " +
                            "uk-card-small " +
                            "uk-overflow-hidden " +
                            "uk-link-heading " +
                            "uk-display-block " +
                            "uk-box-shadow-hover-large " +
                            "uk-height-1-1 " +
                            "tm-ignore-container")
                //- Preview
                if article.preview
                  div.uk-card-media-top
                    figure.uk-margin-remove.tm-ratio.tm-ratio-16-9
                      div.uk-cover-container
                        img(src= article.preview alt= article.title uk-cover)
                div.uk-card-body
                  //- Date
                  div.uk-article-meta.uk-margin-xsmall-bottom
                    time= article.date
                  //- Title
                  h3.uk-h4.uk-margin-remove= article.title

================================================
FILE: src/templates/pages/blog.pug
================================================
extends /layouts/_informational

block vars
  -
    page = {
      title: 'Blog',
      breadcrumbs: {}
    }

    informationalActivePage = 3

block informational
  div.uk-grid-medium.uk-child-width-1-1(uk-grid)

    each article in articles
      div
        +article(article)

================================================
FILE: src/templates/pages/brands.pug
================================================
extends /layouts/_pages

block vars
  -
    page = {
      title: 'Brands',
      breadcrumbs: {}
    }

block pages
  div.uk-card.uk-card-default.tm-ignore-container

    header.uk-card-header.uk-background-default
      nav
        ul.uk-subnav.uk-flex-center.uk-margin-remove
          li: a(href="#number") #
          li: a(href="#A") A
          li: a(href="#B") B
          li: a(href="#C") C
          li: a(href="#D") D
          li: a(href="#E") E
          li: a(href="#F") F
          li: a(href="#G") G
          li: a(href="#H") H
          li: a(href="#I") I
          li: a(href="#J") J
          li: a(href="#K") K
          li: a(href="#L") L
          li: a(href="#M") M
          li: a(href="#N") N
          li: a(href="#O") O
          li: a(href="#P") P
          li: a(href="#Q") Q
          li: a(href="#R") R
          li: a(href="#S") S
          li: a(href="#T") T
          li: a(href="#U") U
          li: a(href="#V") V
          li: a(href="#W") W
          li: a(href="#X") X
          li: a(href="#Y") Y
          li: a(href="#Z") Z

    section.uk-card-body(id="A")
      div(uk-grid)

        div(class="uk-width-1-1 uk-width-1-6@m")
          h2.uk-text-center A

        div(class="uk-width-1-1 uk-width-expand@m")
          ul(class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-child-width-1-5@m"
             uk-grid)
            each brand in brands
              li
                a(class="uk-link-muted " +
                        "uk-text-center " +
                        "uk-display-block " +
                        "uk-padding-small " +
                        "uk-box-shadow-hover-large"
                  href="#")
                  if brand.image
                    div.tm-ratio.tm-ratio-4-3
                      div.tm-media-box
                        figure.tm-media-box-wrap
                          img.item-brand(src= brand.image alt= brand.name)
                    div.uk-margin-small-top.uk-text-truncate= brand.name

    section.uk-card-body(id="B")
      div(uk-grid)

        div(class="uk-width-1-1 uk-width-1-6@m")
          h2.uk-text-center B

        div(class="uk-width-1-1 uk-width-expand@m")

    section.uk-card-body(id="C")
      div(uk-grid)

        div(class="uk-width-1-1 uk-width-1-6@m")
          h2.uk-text-center C

        div(class="uk-width-1-1 uk-width-expand@m")

================================================
FILE: src/templates/pages/cart.pug
================================================
extends /layouts/_pages

block vars
  -
    page = {
      title: 'Cart',
      breadcrumbs: []
    }

block pages
  div.uk-grid-medium(uk-grid)

    //- Items
    div.uk-width-1-1(class="uk-width-expand@m")
      div.uk-card.uk-card-default.uk-card-small.tm-ignore-container

        //- Header
        header(class="uk-card-header " +
                     "uk-text-uppercase " +
                     "uk-text-muted " +
                     "uk-text-center " +
                     "uk-text-small " +
                     "uk-visible@m")
          div.uk-grid-small.uk-child-width-1-2(uk-grid)

            //- Product cell
            div product

            //- Other cells
            div
              div.uk-grid-small.uk-child-width-expand(uk-grid)
                div price
                div.tm-quantity-column quantity
                div sum
                div.uk-width-auto
                  div(style="width: 20px;")

        //- Body
        each product in products
          if product.isAddedToCart
            div.uk-card-body
              div(class="uk-grid-small " +
                        "uk-child-width-1-1 " +
                        "uk-child-width-1-2@m " +
                        "uk-flex-middle"
                  uk-grid)

                // Product cell
                div
                  div.uk-grid-small(uk-grid)

                    //- Image
                    div.uk-width-1-3
                      div.tm-ratio.tm-ratio-4-3
                        a.tm-media-box(href= product.href)
                          figure.tm-media-box-wrap
                            if product.image
                              img(src= product.image.small alt= product.name)
                            else
                              +icon("image", "3")(class="uk-text-muted")

                    //- Info
                    div.uk-width-expand
                      div.uk-text-meta= product.type
                      a.uk-link-heading(href= product.href)= product.name

                // Other cells
                div
                  div(class="uk-grid-small " +
                            "uk-child-width-1-1 " +
                            "uk-child-width-expand@s " +
                            "uk-text-center"
                      uk-grid)

                    //- Price
                    div
                      div.uk-text-muted(class="uk-hidden@m") Price
                      div= product.price

                    //- Quantity
                    div.tm-cart-quantity-column
                      +quantity(product.id)

                    //- Sum
                    div
                      div.uk-text-muted(class="uk-hidden@m") Sum
                      div= product.price

                    //- Actions
                    div(class="uk-width-auto@s")
                      a.uk-text-danger(uk-tooltip="Remove")
                        +icon("close")

        div.uk-card-footer
          label
            span.uk-form-label.uk-margin-small-right Promo Code
            div.uk-inline
              a.uk-form-icon.uk-form-icon-flip(href="#" uk-icon="arrow-right")
              input.uk-input.uk-form-width-small(type="text")

    //- Checkout
    div.uk-width-1-1.tm-aside-column(class="uk-width-1-4@m")
      div.uk-card.uk-card-default.uk-card-small.tm-ignore-container(
        uk-sticky="offset: 30; bottom: true; media: @m;")

        div.uk-card-body

          div.uk-grid-small(uk-grid)
            div.uk-width-expand.uk-text-muted Subtotal
            div $3148

          div.uk-grid-small(uk-grid)
            div.uk-width-expand.uk-text-muted Discount
            div.uk-text-danger −$29

        div.uk-card-body

          div.uk-grid-small.uk-flex-middle(uk-grid)
            div.uk-width-expand.uk-text-muted Total
            div.uk-text-lead.uk-text-bolder $3119

          a.uk-button.uk-button-primary.uk-margin-small.uk-width-1-1(
            href="checkout.html") checkout


================================================
FILE: src/templates/pages/catalog.pug
================================================
extends /layouts/_pages

block vars
  -
    page = {
      title: 'Catalog',
      breadcrumbs: {},
      quantity: 641
    }

block pages
  div.uk-grid-medium(uk-grid)

    //- Navigation
    aside(class="uk-width-1-4 uk-visible@m tm-aside-column")
      nav.uk-card.uk-card-default.uk-card-body.uk-card-small(uk-sticky="bottom: true; offset: 90")
        ul.uk-nav.uk-nav-default(uk-scrollspy-nav="closest: li; scroll: true; offset: 90")
          each category in catalog
            li: a(href="#" + category.id)= category.name

    //- Categories
    div(class="uk-width-1-1 uk-width-expand@m")
      div.uk-grid-medium.uk-child-width-1-1(uk-grid)
        each category in catalog
          section(id= category.id)
            div.uk-card.uk-card-default.uk-card-small.tm-ignore-container

              //- Header
              header.uk-card-header
                div.uk-grid-small.uk-flex-middle(uk-grid)
                  if category.image
                    a(href= category.href)
                      img(src= category.image
                          alt= category.name
                          width="50"
                          height="50")
                  div.uk-width-expand
                    h2.uk-h4.uk-margin-remove
                      a.uk-link-heading(href= category.href)= category.name
                    div.uk-text-meta= category.quantity + " items"

              //- Body
              if category.items
                div.uk-card-body
                  ul.uk-list
                    each subCategory in category.items
                      li: a(href="subcategory.html")= subCategory

================================================
FILE: src/templates/pages/category.pug
================================================
extends /layouts/_pages

block vars
  -
    page = {
      title: 'Laptops & Tablets',
      breadcrumbs: {
        'Catalog': 'catalog.html'
      },
      quantity: 367
    }

block pages
  div.uk-grid-medium(uk-grid)

    //- Filters
    aside#filters.uk-width-1-4.tm-aside-column.tm-filters(
      uk-offcanvas="overlay: true; " +
                   "container: false;")

      div.uk-offcanvas-bar.uk-padding-remove
        div(class="uk-card " +
                  "uk-card-default " +
                  "uk-card-small " +
                  "uk-flex " +
                  "uk-flex-column " +
                  "uk-height-1-1")

          //- Header
          header.uk-card-header.uk-flex.uk-flex-middle
            div.uk-grid-small.uk-flex-1(uk-grid)
              div.uk-width-expand
                div.uk-h3 Filters
              button.uk-offcanvas-close(type="button" uk-close)

          //- Accordion
          div.uk-margin-remove.uk-flex-1.uk-overflow-auto(
            uk-accordion="multiple: true; targets: > .js-accordion-section"
            style="flex-basis: auto")

            //- Categories
            section.uk-card-small.uk-card-body
              h4.uk-margin-small-bottom Categories
              ul.uk-nav.uk-nav-default
                each category in catalog
                  each item in category.items
                    li: a(href="subcategory.html")= item
                  - break

            //- Prices
            section.uk-card-body.uk-open.js-accordion-section
              h4.uk-accordion-title.uk-margin-remove Prices
              div.uk-accordion-content
                div.uk-grid-small.uk-child-width-1-2.uk-text-small(uk-grid)
                  div
                    div.uk-inline
                      span.uk-form-icon.uk-text-xsmall from
                      input.uk-input(type="text" placeholder="$59")
                  div
                    div.uk-inline
                      span.uk-form-icon.uk-text-xsmall to
                      input.uk-input(type="text" placeholder="$6559")

            //- Properties
            each property in filters
              if property.id= 1
                section.uk-card-body.js-accordion-section(
                  class= { "uk-open": property.isOpen })
                  h4.uk-accordion-title.uk-margin-remove= property.title
                    if property.description
                      +icon("question", ".75")(
                        class="tm-help-icon"
                        onclick="event.stopPropagation();")
                      div.uk-margin-remove(
                        uk-drop="mode: click;" +
                                "boundary-align: true; " +
                                "boundary: !.uk-accordion-title; " +
                                "pos: bottom-justify;")
                        div(class="uk-card " +
                                  "uk-card-body " +
                                  "uk-card-default " +
                                  "uk-card-small " +
                                  "uk-box-shadow-xlarge " +
                                  "uk-text-small")= property.description
                  div.uk-accordion-content
                    ul.uk-list.tm-scrollbox
                      each item in property.items
                        li
                          input.tm-checkbox(
                            id= property.name + "-" + item.id
                            name= property.name
                            value= item.id
                            type="checkbox")
                          label(for= property.name + "-" + item.id)
                            span= item.name
                              |
                              |
                              span.uk-text-meta.uk-text-xsmall= item.quantity
              - break

            //- Reset filters
            div.uk-card-body
              button.uk-button.uk-button-default.uk-width-1-1
                +icon("close", ".75")(class="uk-margin-xsmall-right")
                | Reset all filters

    //- Content
    div.uk-width-expand
      include /partials/_products

================================================
FILE: src/templates/pages/checkout.pug
================================================
extends /layouts/_checkout

block vars
  -
    page = {
      title: 'Checkout'
    }

block checkout
  div.uk-grid-medium(uk-grid)

    //- Form
    form.uk-form-stacked.uk-width-1-1.tm-checkout(class="uk-width-expand@m")
      div.uk-grid-medium.uk-child-width-1-1(uk-grid)

        //- Contact Information
        section
          h2.tm-checkout-title Contact Information
          div.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container
            div(class="uk-grid-small " +
                      "uk-child-width-1-1 " +
                      "uk-child-width-1-2@s"
                uk-grid)

              div
                label
                  div.uk-form-label.uk-form-label-required First Name
                  input.uk-input(type="text" required)

              div
                label
                  div.uk-form-label.uk-form-label-required Last Name
                  input.uk-input(type="text" required)

              div
                label
                  div.uk-form-label.uk-form-label-required Phone Number
                  input.uk-input(type="tel" required)

              div
                label
                  div.uk-form-label.uk-form-label-required Email
                  input.uk-input(type="email" required)

        //- Shipping
        section
          h2.tm-checkout-title Shipping
          div.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container
            div(class="uk-grid-small " +
                      "uk-grid-match " +
                      "uk-child-width-1-1 " +
                      "uk-child-width-1-3@s " +
                      "uk-flex-center"
                uk-switcher="toggle: > * > .tm-choose"
                uk-grid)

              div
                a.tm-choose(href="#")
                  div.tm-choose-title pick up from store
                  div.tm-choose-description Free, tomorrow

              div
                a.tm-choose(href="#")
                  div.tm-choose-title delivery in city
                  div.tm-choose-description Free, tomorrow

              div
                a.tm-choose(href="#")
                  div.tm-choose-title regional delivery
                  div.tm-choose-description
                    | Via Russian Post or postal courier services. Sending to any country

            div.uk-switcher.uk-margin

              //- Pick up
              section
                div(class="uk-grid-small uk-child-width-1-1 uk-child-width-1-2@s"
                    uk-grid)

                  div
                    figure.uk-card-media-top.tm-ratio.tm-ratio-16-9.js-map(
                      data-latitude="59.9356728"
                      data-longitude="30.3258604"
                      data-zoom="14")

                  div.uk-text-small
                    div.uk-text-bolder Store Name
                    div!= shopInfo.address
                    div= shopInfo.openingHours

              //- Shipping in St Petersburg
              section

                div.uk-grid-small(uk-grid)

                  div.uk-width-expand
                    label
                      div.uk-form-label.uk-form-label-required Street
                      input.uk-input(type="text")

                  div(class="uk-width-1-3 uk-width-1-6@s")
                    label
                      div.uk-form-label.uk-form-label-required House
                      input.uk-input(type="text")

                div.uk-grid-small(class="uk-child-width-1-3 uk-child-width-1-4@s" uk-grid)

                  div
                    label
                      div.uk-form-label Building
                      input.uk-input(type="text")

                  div
                    label
                      div.uk-form-label Entrance
                      input.uk-input(type="text")

                  div
                    label
                      div.uk-form-label Floor
                      input.uk-input(type="text")

                  div
                    label
                      div.uk-form-label Apartment
                      input.uk-input(type="text")

                  div.uk-width-1-1
                    label
                      div.uk-form-label Comment
                      textarea.uk-textarea(
                        rows="5"
                        placeholder="Additional information: phone numbers or doorphone code")

                div.uk-grid-small(class="uk-child-width-1-2 uk-child-width-1-4@s" uk-grid)

                  div.uk-width-1-1.uk-text-meta Choose a convenient date and delivery interval

                  div
                    select.uk-select
                      option Tomorrow
                      option 25 May
                      option 26 May
                      option 27 May
                      option 28 May
                      option 29 May
                      option 30 May
                      option 1 June

                  div
                    select.uk-select
                      option 09:00 – 12:00
                      option 12:00 – 15:00
                      option 15:00 – 18:00
                      option 18:00 – 21:00
                      option 21:00 – 23:00


              //- Regional shipping
              div

                div.uk-grid-small(uk-grid)

                  div.uk-width-1-1
                    label
                      div.uk-form-label.uk-form-label-required Country
                      select.uk-select
                        option Choose the country
                        option(value="RU") Russia

                div.uk-grid-small(uk-grid)

                  div.uk-width-expand
                    label
                      div.uk-form-label.uk-form-label-required City
                      input.uk-input(type="text")

                  div(class="uk-width-1-3 uk-width-1-6@s")
                    label
                      div.uk-form-label.uk-form-label-required Post Code
                      input.uk-input(type="text")

                div.uk-grid-small(uk-grid)

                  div.uk-width-expand
                    label
                      div.uk-form-label.uk-form-label-required Street
                      input.uk-input(type="text")

                  div(class="uk-width-1-3 uk-width-1-6@s")
                    label
                      div.uk-form-label.uk-form-label-required House
                      input.uk-input(type="text")

                div.uk-grid-small(class="uk-child-width-1-3 uk-child-width-1-4@s" uk-grid)

                  div
                    label
                      div.uk-form-label Building
                      input.uk-input(type="text")

                  div
                    label
                      div.uk-form-label Entrance
                      input.uk-input(type="text")

                  div
                    label
                      div.uk-form-label Floor
                      input.uk-input(type="text")

                  div
                    label
                      div.uk-form-label Apartment
                      input.uk-input(type="text")

                  div.uk-width-1-1
                    label
                      div.uk-form-label Comment
                      textarea.uk-textarea(
                        rows="5"
                        placeholder="Additional information: phone numbers or doorphone code")

        //- Payment
        section
          h2.tm-checkout-title Payment
          div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
            div.uk-card-body
              div(class="uk-grid-small " +
                        "uk-grid-match " +
                        "uk-child-width-1-1 " +
                        "uk-child-width-1-3@s " +
                        "uk-flex-center"
                  uk-switcher="toggle: > * > .tm-choose"
                  uk-grid)

                div
                  a.tm-choose(href="#")
                    div.tm-choose-title payment upon receipt
                    div.tm-choose-description Cash, credit card

                div
                  a.tm-choose(href="#")
                    div.tm-choose-title online by card
                    div.tm-choose-description Visa, MasterCard

                div
                  a.tm-choose(href="#")
                    div.tm-choose-title electronic payment
                    div.tm-choose-description PayPal, Yandex.Money, QIWI

            div.uk-card-footer
              div.uk-grid-small.uk-flex-middle.uk-flex-center.uk-text-center(uk-grid)

                div.uk-text-meta
                  +icon("lock", ".75")(class="uk-margin-xsmall-right")
                  | Security of payments is is provided by secure protocols

                div
                  img(src="images/verified-by-visa.svg"
                      title="Verified by Visa"
                      style="height: 25px;")

                div
                  img(src="images/mastercard-securecode.svg"
                      title="MasterCard SecureCode"
                      style="height: 25px;")

    //- Checkout
    div(class="uk-width-1-1 uk-width-1-4@m tm-aside-column")
      div.uk-card.uk-card-default.uk-card-small.tm-ignore-container(
        uk-sticky="offset: 30; bottom: true; media: @m;")

        section.uk-card-body
          h4 Items in order
          each product in products
            if product.isAddedToCart
              div.uk-grid-small(uk-grid)
                div.uk-width-expand
                  div.uk-text-small= product.name
                  div.uk-text-meta 1 × #{product.price}
                div.uk-text-right
                  div= product.price

        section.uk-card-body

          div.uk-grid-small(uk-grid)
            div.uk-width-expand
              div.uk-text-muted Shipping
            div.uk-text-right
              div Pick up from store
              div.uk-text-meta Free, tomorrow

          div.uk-grid-small(uk-grid)
            div.uk-width-expand
              div.uk-text-muted Payment
            div.uk-text-right
              div Online by card

        section.uk-card-body

          div.uk-grid-small(uk-grid)
            div.uk-width-expand
              div.uk-text-muted Subtotal
            div.uk-text-right
              div $3148

          div.uk-grid-small(uk-grid)
            div.uk-width-expand
              div.uk-text-muted Discount
            div.uk-text-right
              div.uk-text-danger −$29

        section.uk-card-body

          div.uk-grid-small.uk-flex-middle(uk-grid)
            div.uk-width-expand
              div.uk-text-muted Total
            div.uk-text-right
              div.uk-text-lead.uk-text-bolder $3119

          button.uk-button.uk-button-primary.uk-margin-small.uk-width-1-1 checkout

================================================
FILE: src/templates/pages/compare.pug
================================================
extends /layouts/_pages

block vars
  -
    page = {
      title: 'Compare',
      breadcrumbs: {}
    }

block pages
  div.uk-card.uk-card-default.uk-overflow-auto.tm-ignore-container
    table.uk-table.uk-table-divider.tm-compare-table

      thead
        tr.uk-child-width-1-4

          td.uk-table-middle.uk-text-center.tm-compare-column
            input.tm-checkbox(id="show-difference" type="checkbox")
            label(for="show-difference") Show differences only

          each product in products
            if product.isAddedToCompare
              td.tm-compare-table-column
                div.uk-height-1-1
                  div.uk-grid-small.uk-child-width-1-1.uk-height-1-1(uk-grid)

                    div.uk-text-center
                      a.uk-text-small.uk-text-danger(href="#")
                        +icon("close", ".75")
                        span.uk-margin-xsmall-left.tm-pseudo Delete

                    div
                      +product-small(product)

      each group in compare
        tbody
          tr
            th(colspan="4")
              h3.uk-margin-remove= group.name
          each values, property in group.properties
            tr
              th= property
              each value in values
                td!= value

================================================
FILE: src/templates/pages/contacts.pug
================================================
extends /layouts/_informational

block vars
  -
    page = {
      title: 'Contacts',
      breadcrumbs: {}
    }

    informationalActivePage = 2

block informational
  article(class="uk-card " +
                "uk-card-default " +
                "uk-card-small " +
                "uk-card-body " +
                "uk-article " +
                "tm-ignore-container")

    div.tm-wrapper
      figure.tm-ratio.tm-ratio-16-9.js-map(
        data-latitude="59.9356728"
        data-longitude="30.3258604"
        data-zoom="14")

    div(class="uk-child-width-1-1 uk-child-width-1-2@s uk-margin-top"
            uk-grid)

      section
        h3 Store
        ul.uk-list
          li
            a.uk-link-heading(href="#")
              +icon("receiver")(class="uk-margin-small-right")
              span.tm-pseudo= shopInfo.phone
          li
            a.uk-link-heading(href="#")
              +icon("mail")(class="uk-margin-small-right")
              span.tm-pseudo= shopInfo.email
          li
            div
              +icon("location")(class="uk-margin-small-right")
              span!= shopInfo.address
          li
            div
              +icon("clock")(class="uk-margin-small-right")
              span= shopInfo.openingHours

      section
        h3 Feedback
        dl.uk-description-list
          dt Cooperation
          dd: a.uk-link-muted(href="#") cooperation@example.com
          dt Partners
          dd: a.uk-link-muted(href="#") partners@example.com
          dt Press
          dd: a.uk-link-muted(href="#") press@example.com

      section.uk-width-1-1
        h2.uk-text-center Contact Us
        form
          div.uk-grid-small.uk-child-width-1-1(uk-grid)
            div
              label
                div.uk-form-label.uk-form-label-required Name
                input.uk-input(type="text" required)
            div
              label
                div.uk-form-label.uk-form-label-required Email
                input.uk-input(type="email" required)
            div
              label
                div.uk-form-label Topic
                select.uk-select
                  option Customer service
                  option Tech support
                  option Other
            div
              label
                div.uk-form-label Message
                textarea.uk-textarea(rows="5")
            div.uk-text-center
              button.uk-button.uk-button-primary Send

================================================
FILE: src/templates/pages/delivery.pug
================================================
extends /layouts/_informational

block vars
  -
    page = {
      title: 'Delivery',
      breadcrumbs: {}
    }

    informationalActivePage = 6

block informational
  article(class="uk-card " +
                "uk-card-default " +
                "uk-card-small " +
                "uk-card-body " +
                "uk-article " +
                "tm-ignore-container")

    h2 Pickup from store in St. Petersburg
    p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam.

    figure
      div.uk-text-bolder= shopInfo.storeName
      div!= shopInfo.address
      div= shopInfo.openingHours

    div.tm-wrapper
      figure.tm-ratio.tm-ratio-16-9.js-map(
        data-latitude="59.9356728"
        data-longitude="30.3258604"
        data-zoom="14")

    h2 Delivery in St. Petersburg
    p Nullam massa sem, mollis ut luctus at, tincidunt a lorem. Aliquam sed dictum elit, quis consequat metus. Proin in mauris finibus urna lacinia laoreet sed id orci. Pellentesque volutpat tellus sit amet enim rutrum, vel eleifend metus consectetur. Sed lacinia urna a neque maximus placerat. Praesent blandit hendrerit dui non placerat.
    ul
      li Fusce eget lorem ex. Vivamus nisl eros, condimentum at mollis id, tempor a risus. Integer pellentesque bibendum est, dapibus lacinia lacus.
      li Vivamus tellus nibh, mattis at aliquam et, vestibulum aliquet leo. Nunc cursus lectus ex, laoreet commodo ligula posuere nec.
      li Suspendisse potenti. Vivamus fermentum vitae lacus ut vulputate. Mauris sed consectetur nibh.

    h2 Regional Delivery
    p Aliquam erat volutpat. Pellentesque sit amet risus odio. Vestibulum id porta libero, non interdum libero. Integer pretium tempus viverra. Nulla iaculis sed tellus vel luctus. Curabitur maximus quis nibh mattis pulvinar. Mauris convallis dapibus justo, at fringilla erat porta at. Vivamus at ante nec augue convallis consectetur at vitae orci.
    p Sed a rhoncus felis, quis efficitur orci. Maecenas imperdiet non sapien a sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pretium ipsum posuere, congue leo sit amet, finibus sem. Morbi aliquam pellentesque egestas. Curabitur sit amet commodo ipsum.

================================================
FILE: src/templates/pages/faq.pug
================================================
extends /layouts/_informational

block vars
  -
    page = {
      title: 'FAQ',
      breadcrumbs: {}
    }

    informationalActivePage = 5

block informational
  article(class="uk-card " +
                "uk-card-default " +
                "uk-card-small " +
                "uk-card-body " +
                "uk-article " +
                "tm-ignore-container")

    ul.uk-list-divider.uk-list-large(uk-accordion="multiple: true")
      li
        a.uk-accordion-title(href="#") Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        div.uk-accordion-content
          p Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam. In sodales quam quis mi mollis eleifend id sit amet velit. Sed ultricies condimentum magna, vel commodo dolor luctus in. Aliquam et orci nibh. Nunc purus metus, aliquam vitae venenatis sit amet, porta non est. Proin vehicula nisi eu molestie varius. Pellentesque semper ex diam, at tristique ipsum varius sed. Pellentesque non metus ullamcorper, iaculis nibh quis, facilisis lorem. Sed malesuada eu lacus sit amet feugiat. Aenean iaculis dui sed quam consectetur elementum.
      li
        a.uk-accordion-title(href="#") Nullam massa sem, mollis ut luctus at, tincidunt a lorem?
        div.uk-accordion-content
          p Aliquam sed dictum elit, quis consequat metus. Proin in mauris finibus urna lacinia laoreet sed id orci. Pellentesque volutpat tellus sit amet enim rutrum, vel eleifend metus consectetur. Sed lacinia urna a neque maximus placerat. Praesent blandit hendrerit dui non placerat. Sed malesuada sem sit amet arcu faucibus, sit amet accumsan nisl laoreet. Quisque auctor sit amet nisl rhoncus interdum. Nullam euismod odio sem, quis pulvinar purus gravida eget. Nullam molestie, lacus vel vehicula elementum, massa arcu bibendum lacus, vitae tempus justo orci id lectus. Duis justo neque, elementum eget ante in, condimentum condimentum ante. Maecenas quis eleifend risus. In hac habitasse platea dictumst. Nunc posuere ultrices dolor, at auctor lacus dignissim ut. Donec viverra imperdiet nisi, sit amet mattis massa pellentesque ac.
      li
        a.uk-accordion-title(href="#") Aliquam pretium diam et ullamcorper malesuada?
        div.uk-accordion-content
          p Praesent feugiat lectus faucibus tellus congue pharetra. In viverra vehicula pellentesque. Etiam consectetur ultricies magna at bibendum. Sed posuere libero ut nulla ornare, faucibus pellentesque odio pulvinar. Vestibulum feugiat ex id ex elementum egestas. Integer laoreet mollis risus, id efficitur neque. Pellentesque quis dolor faucibus, ultrices tellus id, vestibulum neque. Sed eros purus, dignissim id fermentum ut, lacinia laoreet odio. Sed mi erat, aliquet at facilisis quis, laoreet in massa. Pellentesque eu massa accumsan, iaculis erat eu, tincidunt sem. Quisque id orci id dui congue pretium. Pellentesque iaculis, dolor aliquet tempor laoreet, enim metus tincidunt massa, ut porttitor sem dui sit amet arcu. Vestibulum sodales laoreet enim, sit amet vestibulum nisl porttitor a.
      li
        a.uk-accordion-title(href="#") Etiam suscipit at nisi eget auctor?
        div.uk-accordion-content
          p Mauris id pellentesque metus. In quis arcu sed enim maximus pellentesque et eget velit. Etiam euismod enim vitae condimentum tristique.
      li
        a.uk-accordion-title(href="#") Sed porta diam eget enim bibendum laoreet?
        div.uk-accordion-content
          p Donec molestie sem et tellus vestibulum venenatis. Quisque iaculis ornare luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi velit nibh, ullamcorper eu imperdiet id, rutrum quis mi. Donec eu aliquet lorem. Nulla at lectus turpis. Sed et diam ac lorem iaculis lacinia.


================================================
FILE: src/templates/pages/favorites.pug
================================================
extends /layouts/_account

block vars
  -
    page = {
      title: 'Favorites'
    }

    profileActivePage = 2

block account
  div(class="uk-grid-collapse " +
            "tm-products-list"
      uk-grid)
    each product in products
      if product.isAddedToFavorites
        +product(product)





================================================
FILE: src/templates/pages/index.pug
================================================
extends /layouts/_default

block vars
  -
    page = {
      title: 'Home'
    }

block default

  //- Slider
  section.uk-position-relative.uk-visible-toggle.uk-light(uk-slideshow="min-height: 300; max-height: 600;")
    ul.uk-slideshow-items
      each item in promo
        li(style="background-color: " + item.background)
          a(href="#")
            figure.uk-container.uk-height-1-1
              img(src= item.image
                  alt= item.title
                  width="1200"
                  height="600"
                  uk-cover)

    a.uk-position-center-left.uk-position-small.uk-hidden-hover(
      href="#"
      uk-slideshow-item="previous"
      uk-slidenav-previous)
    a.uk-position-center-right.uk-position-small.uk-hidden-hover(
      href="#"
      uk-slideshow-item="next"
      uk-slidenav-next)

    div.uk-position-bottom-center.uk-position-small
      ul.uk-slideshow-nav.uk-dotnav

  //- Categories
  section.uk-section.uk-section-default.uk-section-small
    div.uk-container
      div(class="uk-grid-small " +
                "uk-child-width-1-2 " +
                "uk-child-width-1-3@s " +
                "uk-child-width-1-6@m"
          uk-grid)
        each category in categories
          div
            a(class="uk-link-muted " +
                    "uk-text-center " +
                    "uk-display-block " +
                    "uk-padding-small " +
                    "uk-box-shadow-hover-large"
              href= category.href)
              if category.image
                div.tm-ratio.tm-ratio-4-3
                  div.tm-media-box
                    figure.tm-media-box-wrap
                      img.item-brand(src= category.image alt= category.title)
              div.uk-margin-small-top
                div.uk-text-truncate= category.title
                if category.comment
                  div.uk-text-meta.uk-text-xsmall.uk-text-truncate= category.comment

      div.uk-margin.uk-text-center
        +link-to-all("see all categories", "catalog.html")

  //- Trending
  section.uk-section.uk-section-small
    div.uk-container

      h2.uk-text-center Trending Items

      div.uk-card.uk-card-default.tm-ignore-container
        div(class="uk-grid-collapse " +
                  "uk-child-width-1-3 " +
                  "uk-child-width-1-4@m " +
                  "tm-products-grid"
            uk-grid)
          - var count = 0
          each product in products
            if count < 8
              +product(product)
            - count++;

      div.uk-margin.uk-text-center
        +link-to-all("shop all", "subcategory.html")

  //- Brands
  section.uk-section.uk-section-default.uk-section-small
    div.uk-container

      h2.uk-text-center Popular Brands

      div.uk-margin-medium-top(uk-slider="finite: true")
        div.uk-position-relative
          div.uk-grid-small.uk-flex-middle(uk-grid)

            div(class="uk-visible@m")
              a(href="#"
                uk-slidenav-previous
                uk-slider-item="previous")

            div.uk-width-expand.uk-slider-container
              ul(class="uk-slider-items " +
                       "uk-child-width-1-3 " +
                       "uk-child-width-1-6@s " +
                       "uk-grid " +
                       "uk-grid-large")
                each brand in brands
                  li
                    div.tm-ratio.tm-ratio-16-9
                      a.uk-link-muted.tm-media-box.tm-grayscale(
                        href="#"
                        title= brand.name)
                        figure.tm-media-box-wrap
                          img(src= brand.image alt= brand.name)

            div(class="uk-visible@m")
              a(href="#"
                uk-slider-item="next"
                uk-slidenav-next)

        ul(class="uk-slider-nav " +
                 "uk-dotnav " +
                 "uk-flex-center " +
                 "uk-margin-medium-top " +
                 "uk-hidden@m")

      div.uk-margin.uk-text-center
        +link-to-all("see all brands", "brands.html")

  //- Blog
  section.uk-section.uk-section-small
    div.uk-container

      h2.uk-text-center Blog

      div(class="uk-grid-medium " +
                "uk-grid-match " +
                "uk-child-width-1-1 " +
                "uk-child-width-1-2@s"
          uk-grid)

        each article in articles
          div
            +article(article)

      div.uk-margin.uk-text-center
        +link-to-all("see all articles", "blog.html")

  //- About & News
  section.uk-section.uk-section-default.uk-section-small
    div.uk-container
      div(class="uk-grid-medium " +
                "uk-child-width-1-1 " +
                "uk-child-width-1-2@s"
          uk-grid)

        //- About
        section

          h2(class="uk-text-center uk-text-left@s") About

          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at neque vulputate, vestibulum magna in, accumsan urna. Nulla feugiat ipsum ex, molestie porttitor nibh faucibus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit lorem ut finibus semper. Donec ac vehicula erat, nec consequat massa.
          p Quisque rhoncus fermentum sapien id congue. Nam at rutrum turpis. Aliquam sagittis imperdiet tortor vel dignissim. Ut ipsum nunc, egestas et odio id, vestibulum posuere orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          div(class="uk-text-center uk-text-left@s")
            +link-to-all("read more", "about.html")

        //- News
        section

          h2(class="uk-text-center uk-text-left@s") Latest News

          ul.uk-list.uk-list-small.uk-list-divider
            each article in news
              li
                article.uk-article
                  div.uk-article-body
                    //- Date
                    div.uk-article-meta.uk-margin-xsmall-bottom
                      time= article.date
                    //- Title
                    h3.uk-h4.uk-margin-remove
                      a.uk-link-heading(href= article.href)= article.title
                    //- Description
                    if article.description
                      div.uk-margin-xsmall-top.uk-text-small!= article.description

          div(class="uk-margin uk-text-center uk-text-left@s")
            +link-to-all("see all news", "news.html")

  //- Subscribe
  section.uk-section.uk-section-primary.uk-section-small.uk-light
    div.uk-container

        div.uk-text-center
          div.uk-h2.uk-margin-remove Subscribe for updates
          div Be aware of new products and special offers.

        div.uk-margin
          form
            div.uk-grid-small.uk-flex-center(uk-grid)
              div(class="uk-width-1-1 uk-width-medium@s")
                div.uk-inline.uk-width-1-1
                  span.uk-form-icon(uk-icon="mail")
                  input.uk-input(type="email" placeholder="Your email" required)
              div
                button.uk-button.uk-button-primary subscribe

================================================
FILE: src/templates/pages/news.pug
================================================
extends /layouts/_informational

block vars
  -
    page = {
      title: 'News',
      breadcrumbs: {}
    }

    informationalActivePage = 4

block informational
  section.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container
    ul.uk-list.uk-list-large.uk-list-divider
      each article in news
        li
          article.uk-article
            div.uk-article-body
              //- Date
              div.uk-article-meta.uk-margin-xsmall-bottom
                time= article.date
              //- Title
              div
                h3
                  a.uk-link-heading(href= article.href)= article.title
              //- Description
              if article.description
                div.uk-margin-small-top!= article.description

================================================
FILE: src/templates/pages/personal.pug
================================================
extends /layouts/_account

block vars
  -
    page = {
      title: 'Personal Info'
    }

    profileActivePage = 3

block account
  div.uk-card-body
    form.uk-form-stacked

      div.uk-grid-medium.uk-child-width-1-1(uk-grid)

        //- Contact
        fieldset.uk-fieldset
          legend.uk-h4 Contact

          div(class="uk-grid-small " +
                    "uk-child-width-1-1 " +
                    "uk-child-width-1-2@s"
              uk-grid)

            div
              label
                div.uk-form-label First Name
                input.uk-input(type="text" value= profile.firstName)

            div
              label
                div.uk-form-label Last Name
                input.uk-input(type="text" value= profile.lastName)

            div
              label
                div.uk-form-label Phone Number
                input.uk-input(type="tel" value= profile.phone)

            div
              label
                div.uk-form-label Date of Birth
                input.uk-input(type="date" value= profile.dateOFBirth)

        //- Address
        fieldset.uk-fieldset
          legend.uk-h4 Address

          div.uk-grid-small(uk-grid)

            div.uk-width-1-1
              label
                div.uk-form-label Country
                select.uk-select
                  option Choose the country
                  option(value="RU") Russia

          div.uk-grid-small(uk-grid)

            div.uk-width-expand
              label
                div.uk-form-label City
                input.uk-input(type="text")

            div(class="uk-width-1-3 uk-width-1-6@s")
              label
                div.uk-form-label Post Code
                input.uk-input(type="text")

          div.uk-grid-small(uk-grid)

            div.uk-width-expand
              label
                div.uk-form-label Street
                input.uk-input(type="text")

            div(class="uk-width-1-3 uk-width-1-6@s")
              label
                div.uk-form-label House
                input.uk-input(type="text")

          div(class="uk-grid-small uk-child-width-1-3 uk-child-width-1-4@s"
               uk-grid)

            div
              label
                div.uk-form-label Building
                input.uk-input(type="text")

            div
              label
                div.uk-form-label Entrance
                input.uk-input(type="text")

            div
              label
                div.uk-form-label Floor
                input.uk-input(type="text")

            div
              label
                div.uk-form-label Apartment
                input.uk-input(type="text")

            div.uk-width-1-1
              label
                div.uk-form-label Comment
                textarea.uk-textarea(
                  rows="5"
                  placeholder="Additional information: phone numbers or doorphone code")

  div.uk-card-footer.uk-text-center
    button.uk-button.uk-button-primary save

================================================
FILE: src/templates/pages/product.pug
================================================
extends /layouts/_pages

block vars
  -
    product = products[0];

    page = {
      title: product.name,
      breadcrumbs: {
        'Catalog': 'catalog.html',
        'Laptops & Tablets': 'category.html',
        'Laptops': 'subcategory.html'
      }
    }

block pages
  div.uk-grid-medium.uk-child-width-1-1(uk-grid)

    //- Product
    div
      div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
        div.uk-grid-small.uk-grid-collapse.uk-grid-match(uk-grid)

          //- Media
          div(class="uk-width-1-1 uk-width-expand@m")
            div.uk-grid-collapse.uk-child-width-1-1(
              uk-slideshow="finite: true; ratio: 4:3;"
              uk-grid)

              //- Primary image
              div
                ul.uk-slideshow-items(uk-lightbox)
                  li
                    if product.image
                      a.uk-card-body.tm-media-box.tm-media-box-zoom(href= product.image.large)
                        figure.tm-media-box-wrap
                          img(src= product.image.large alt= product.name)
                    else
                      figure.tm-media-box-wrap
                        +icon("image", "5")(class="uk-text-muted")
                  if product.additionalImages
                    each additionalImage in product.additionalImages
                      li
                        a.uk-card-body.tm-media-box.tm-media-box-zoom(href= additionalImage.large)
                          figure.tm-media-box-wrap
                            img(src= additionalImage.large alt= product.name)

              //- Additional images
              if product.additionalImages
                div
                  div.uk-card-body.uk-flex.uk-flex-center
                    div(class="uk-width-1-2 uk-visible@s")
                      div(uk-slider="finite: true")
                        div.uk-position-relative
                          div.uk-slider-container
                            ul.tm-slider-items.uk-slider-items.uk-child-width-1-4.uk-grid.uk-grid-small
                              li(uk-slideshow-item="0")
                                div.tm-ratio.tm-ratio-1-1
                                  a.tm-media-box.tm-media-box-frame
                                    figure.tm-media-box-wrap
                                      img(src= product.image.small alt= product.name)

                              each additionalImage, index in product.additionalImages
                                li(uk-slideshow-item= index + 1)
                                  div.tm-ratio.tm-ratio-1-1
                                    a.tm-media-box.tm-media-box-frame(href="#")
                                      figure.tm-media-box-wrap
                                        img(src= additionalImage.small alt= product.name)

                            div
                              a.uk-position-center-left-out.uk-position-small(
                                href="#"
                                uk-slider-item="previous"
                                uk-slidenav-previous)
                              a.uk-position-center-right-out.uk-position-small(
                                href="#"
                                uk-slider-item="next"
                                uk-slidenav-next)

                    ul(class="uk-slideshow-nav uk-dotnav uk-hidden@s")

          //- Info
          div(class="uk-width-1-1 uk-width-1-3@m tm-product-info")
            div.uk-card-body

              //- Brand
              div
                a(href= product.brand.href title= product.brand.name)
                  img(src= product.brand.image alt= product.brand.name style="height: 40px;")

              //- Rating & Statuses
              div.uk-margin
                div.uk-grid-small(uk-grid)

                  //- Rating
                  div.uk-flex.uk-flex-middle
                    ul.uk-iconnav.uk-margin-xsmall-bottom.tm-rating
                      li: +icon("star")(class="uk-text-warning")
                      li: +icon("star")(class="uk-text-warning")
                      li: +icon("star")(class="uk-text-warning")
                      li: +icon("star")(class="uk-text-warning")
                      li: +icon("star")(class="uk-text-warning")
                    div.uk-margin-xsmall-left
                      a.uk-text-meta.js-scroll-to-description(
                        href="#description"
                        onclick="UIkit.switcher('.js-product-switcher').show(3);") (2)

                  //- Statuses
                  if product.statuses
                    div
                      each status in product.statuses
                        case status
                          when "new"
                            span.uk-label.uk-label-success.uk-margin-xsmall-right= status
                          when "top selling"
                            span.uk-label.uk-label-warning.uk-margin-xsmall-right= status
                          when "trade-in"
                            span.uk-label.uk-label-danger.uk-margin-xsmall-right= status
                          default
                            span.uk-label= status

              //- Variations
              if product.statuses
                div.uk-margin
                  div.uk-grid-medium(uk-grid)
                    each variation in product.variations
                      div
                        div.uk-text-small.uk-margin-xsmall-bottom= variation.name
                        ul.uk-subnav.uk-subnav-pill.tm-variations(uk-switcher)
                          each value in variation.values
                            li
                              if variation.name === "Color"
                                a.tm-variation-color(uk-tooltip= value.name)
                                  div(style="background-color: " + value.value)
                              else
                                a= value.name

              //- Shop
              div.uk-margin
                div.uk-padding-small.uk-background-primary-lighten.uk-border-rounded
                  div.uk-grid-small.uk-child-width-1-1(uk-grid)

                    //- Prices
                    div
                      if product.isNotAvailable
                        div.uk-text-muted Product not available
                      else
                        if product.oldPrice
                          del.uk-text-meta= product.oldPrice
                          div.tm-product-price= product.price

                    //- Add to cart
                    if !product.isNotAvailable
                      div
                        div.uk-grid-small(uk-grid)

                          //- Quantity
                          div
                            +quantity(product.id)

                          //- Add to cart button
                          div
                            button(class="uk-button " +
                                         "uk-button-primary " +
                                         "tm-product-add-button " +
                                         "tm-shine " +
                                         "js-add-to-cart") add to cart

                          //- Actions buttons
                          div(class="uk-width-auto uk-width-expand@s uk-flex uk-flex-middle uk-text-meta")
                            a.uk-margin-small-right.js-add-to.js-add-to-favorites(
                              class= { "tm-action-button-active js-added-to": product.isAddedToFavorites }
                              uk-tooltip="Add to favorites")
                              +icon("heart")
                            a.js-add-to.js-add-to-compare(
                              class= { "tm-action-button-active js-added-to": product.isAddedToCompare }
                              uk-tooltip="Add to compare")
                              +icon("copy")

              //- Delivery info
              div.uk-margin
                div.uk-padding-small.uk-background-muted.uk-border-rounded
                  div.uk-grid-small.uk-child-width-1-1.uk-text-small(uk-grid)

                    //- Delivery
                    div
                      div.uk-grid-collapse(uk-grid)
                        +icon("cart")(class="uk-margin-xsmall-right")
                        div
                          div.uk-text-bolder Delivery
                          div.uk-text-xsmall.uk-text-muted In stock, free, tomorrow

                    //- Pick up
                    div
                      div.uk-grid-collapse(uk-grid)
                        +icon("location")(class="uk-margin-xsmall-right")
                        div
                          div.uk-text-bolder Pick up from store
                          div.uk-text-xsmall.uk-text-muted In stock, free, tomorrow

              //- Properties
              div.uk-margin
                if product.properties
                  ul.uk-list.uk-text-small.uk-margin-remove
                    for value, property in product.properties
                      li
                        span.uk-text-muted= property + ": "
                        span!= value
                  div.uk-margin-small-top
                    a.uk-link-heading.js-scroll-to-description(
                      href="#description"
                      onclick="UIkit.switcher('.js-product-switcher').show(1);")
                      span.tm-pseudo Detailed specifications
                      +icon("chevron-down", ".75")(class="uk-margin-xsmall-left")

          //- Description
          div#description.uk-width-1-1.tm-product-description

            header
              nav.tm-product-nav(
                uk-sticky="offset: 60; " +
                          "bottom: #description; " +
                          "cls-active: tm-product-nav-fixed;")
                ul.uk-subnav.uk-subnav-pill.js-product-switcher(
                  uk-switcher="connect: .js-tabs")
                  li: a.js-scroll-to-description(href="#description") Overview
                  li: a.js-scroll-to-description(href="#description") Specifications
                  li: a.js-scroll-to-description(href="#description") Accessories
                    |
                    |
                    span (9)
                  li: a.js-scroll-to-description(href="#description") Reviews
                    |
                    |
                    span (2)
                  li: a.js-scroll-to-description(href="#description") Q&A

            div.uk-card-body
              div.uk-switcher.js-product-switcher.js-tabs

                //- Overview
                section
                  article.uk-article
                    div.uk-article-body
                      include /partials/_article

                //- Specifications
                section
                  each group in product.specifications
                    h2= group.name
                    table.uk-table.uk-table-divider.uk-table-justify.uk-table-responsive
                      each value, property in group.properties
                        tr
                          th.uk-width-medium= property
                          td.uk-table-expand!= value

                //- Accessories
                section
                  div.tm-wrapper
                    div(class="uk-grid-collapse " +
                              "uk-child-width-1-3@s " +
                              "uk-child-width-1-4@m " +
                              "tm-products-grid"
                        uk-grid)
                      each product in products
                        +product(product)

                //- Reviews
                section
                  if product.reviews
                    div.uk-grid-small.uk-grid-divider(uk-grid)

                      div(class="uk-width-1-1 " +
                                    "uk-width-1-5@s " +
                                    "uk-text-center " +
                                    "tm-reviews-column")
                        div.uk-text-meta.uk-text-uppercase average rating
                        div.uk-heading-primary 5.0
                        div.uk-flex.uk-flex-center
                          ul.uk-iconnav.tm-rating
                            li: +icon("star")(class="uk-text-warning")
                            li: +icon("star")(class="uk-text-warning")
                            li: +icon("star")(class="uk-text-warning")
                            li: +icon("star")(class="uk-text-warning")
                            li: +icon("star")(class="uk-text-warning")
                        div.uk-margin-small-top.uk-text-meta based on 2 reviews
                        button(class="uk-button uk-button-primary uk-margin-top uk-width-1-1"
                               uk-toggle="target: #review") write a review

                      div(class="uk-width-1-1 " +
                                    "uk-width-expand@s")
                        div.uk-grid-small.uk-grid-divider.uk-child-width-1-1(uk-grid)
                          each review in product.reviews
                            article
                              section.uk-grid-small.uk-child-width-1-1(uk-grid)

                                header
                                  div.uk-h4.uk-margin-remove= review.author
                                  time.uk-text-meta= review.date

                                div
                                  ul.uk-iconnav.uk-margin-bottom.tm-rating
                                    li: +icon("star")(class="uk-text-warning")
                                    li: +icon("star")(class="uk-text-warning")
                                    li: +icon("star")(class="uk-text-warning")
                                    li: +icon("star")(class="uk-text-warning")
                                    li: +icon("star")(class="uk-text-warning")

                                  div!= review.text

                                  div.uk-grid-small.uk-flex-middle.uk-margin-top(uk-grid)
                                    div.uk-text-meta Was this review helpful to you?
                                    div
                                      button.uk-button.uk-button-default.uk-button-small
                                        | Yes
                                        span.uk-margin-xsmall-left.uk-text-muted= review.likes
                                      button.uk-button.uk-button-default.uk-button-small.uk-margin-small-left
                                        | No
                                        span.uk-margin-xsmall-left.uk-text-muted= review.dislikes

                //- Q&A
                section
                  ul.uk-list-divider.uk-list-large(uk-accordion="multiple: true")
                    each question in product.questions
                      li
                        a.uk-accordion-title(href="#")= question.question
                        div.uk-accordion-content= question.answer

    // Related items
    section
      div(uk-slider="finite: true")

        div.uk-grid-small.uk-flex-middle.uk-margin-bottom(uk-grid)
          h2.uk-width-expand(class="uk-text-center uk-text-left@s") Related Products
          div(class="uk-visible@s")
            a.tm-slidenav(href="#" uk-slider-item="previous" uk-slidenav-previous)
            a.tm-slidenav(href="#" uk-slider-item="next" uk-slidenav-next)

        div
          div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
            div.uk-position-relative
              div.uk-slider-container
                div(class="uk-slider-items " +
                          "uk-grid-collapse " +
                          "uk-child-width-1-3 " +
                          "uk-child-width-1-4@m " +
                          "tm-products-grid")
                  each product in products
                    +product(product)

          ul.uk-slider-nav.uk-dotnav.uk-flex-center.uk-margin-top(class="uk-hidden@s")

  //- Modals
  div#review(uk-modal)
    div.uk-modal-dialog.uk-modal-body
      button.uk-modal-close-outside(type="button" uk-close)
      h2.uk-modal-title.uk-text-center Review
      form.uk-form-stacked
        div.uk-grid-small.uk-child-width-1-1(uk-grid)

          div
            label
              div.uk-form-label.uk-form-label-required Name
              input.uk-input(type="text" required)

          div
            label
              div.uk-form-label.uk-form-label-required Email
              input.uk-input(type="email" required)

          div
            div.uk-form-label Rating
            ul.uk-iconnav.tm-rating
              li: a(uk-icon="star")
              li: a(uk-icon="star")
              li: a(uk-icon="star")
              li: a(uk-icon="star")
              li: a(uk-icon="star")

          div
            label
              div.uk-form-label.uk-form-label-required Review
              textarea.uk-textarea(rows="5" required)

          div.uk-text-center
            button.uk-button.uk-button-primary Send


================================================
FILE: src/templates/pages/settings.pug
================================================
extends /layouts/_account

block vars
  -
    page = {
      title: 'Settings'
    }

    profileActivePage = 4

block account
  div.uk-card-body
    form.uk-form-stacked
      div.uk-grid-medium.uk-child-width-1-1(uk-grid)

        //- Email
        fieldset.uk-fieldset
          legend.uk-h4 Email
          div(class="uk-grid-small " +
                    "uk-child-width-1-1"
              uk-grid)
            div
              label
                div.uk-form-label Current Email
                input.uk-input.uk-form-width-large(type="email" value= profile.email disabled)
            div
              label
                div.uk-form-label New Email
                input.uk-input.uk-form-width-large(type="email")
            div
              button.uk-button.uk-button-primary update email

        //- Password
        fieldset.uk-fieldset
          legend.uk-h4 Password
          div(class="uk-grid-small " +
                    "uk-child-width-1-1"
              uk-grid)
            div
              label
                div.uk-form-label Current Password
                input.uk-input.uk-form-width-large(type="password")
            div
              label
                div.uk-form-label New Password
                input.uk-input.uk-form-width-large(type="password")
            div
              label
                div.uk-form-label Confirm Password
                input.uk-input.uk-form-width-large(type="password")
            div
              button.uk-button.uk-button-primary update password

        //- Email notifications
        fieldset.uk-fieldset
          legend.uk-h4 Email Notifications
          ul.uk-list.uk-margin-remove
            li
              input(class="tm-checkbox"
                    id="notification-1"
                    type="checkbox"
                    name="notification"
                    value="1"
                    checked)
              label(for="notification-1")
                span Weekly Newsletter
            li
              input(class="tm-checkbox"
                    id="notification-2"
                    type="checkbox"
                    name="notification"
                    value="1"
                    checked)
              label(for="notification-2")
                span New Product Announcements
            li
              input(class="tm-checkbox"
                    id="notification-3"
                    type="checkbox"
                    name="notification"
                    value="1"
                    checked)
              label(for="notification-3")
                span Product Specials

================================================
FILE: src/templates/pages/subcategory.pug
================================================
extends /layouts/_pages

block vars
  -
    page = {
      title: 'Laptops',
      breadcrumbs: {
        'Catalog': 'catalog.html',
        'Laptops & Tablets': 'category.html'
      },
      quantity: 289
    }

block pages
  div.uk-grid-medium(uk-grid)

    //- Filters
    aside#filters.uk-width-1-4.tm-aside-column.tm-filters(
      uk-offcanvas="overlay: true; " +
                   "container: false;")

      div.uk-offcanvas-bar.uk-padding-remove
        div(class="uk-card " +
                  "uk-card-default " +
                  "uk-card-small " +
                  "uk-flex " +
                  "uk-flex-column " +
                  "uk-height-1-1")

          //- Header
          header.uk-card-header.uk-flex.uk-flex-middle
            div.uk-grid-small.uk-flex-1(uk-grid)
              div.uk-width-expand
                h3 Filters
              button.uk-offcanvas-close(type="button" uk-close)

          //- Accordion
          div.uk-margin-remove.uk-flex-1.uk-overflow-auto(
            uk-accordion="multiple: true; targets: > .js-accordion-section"
            style="flex-basis: auto")

            //- Prices
            section.uk-card-body.uk-open.js-accordion-section
              h4.uk-accordion-title.uk-margin-remove Prices
              div.uk-accordion-content
                div.uk-grid-small.uk-child-width-1-2.uk-text-small(uk-grid)
                  div
                    div.uk-inline
                      span.uk-form-icon.uk-text-xsmall from
                      input.uk-input(type="text" placeholder="$59")
                  div
                    div.uk-inline
                      span.uk-form-icon.uk-text-xsmall to
                      input.uk-input(type="text" placeholder="$6559")

            //- Properties
            each property in filters
              section.uk-card-body.js-accordion-section(
                class= { "uk-open": property.isOpen })
                h4.uk-accordion-title.uk-margin-remove= property.title
                  if property.description
                    +icon("question", ".75")(
                      class="tm-help-icon"
                      onclick="event.stopPropagation();")
                    div.uk-margin-remove(
                      uk-drop="mode: click;" +
                              "boundary-align: true; " +
                              "boundary: !.uk-accordion-title; " +
                              "pos: bottom-justify;")
                      div(class="uk-card " +
                                "uk-card-body " +
                                "uk-card-default " +
                                "uk-card-small " +
                                "uk-box-shadow-xlarge " +
                                "uk-text-small")= property.description
                div.uk-accordion-content
                  ul.uk-list.tm-scrollbox
                    each item in property.items
                      li
                        input.tm-checkbox(
                          id= property.name + "-" + item.id
                          name= property.name
                          value= item.id
                          type="checkbox")
                        label(for= property.name + "-" + item.id)
                          span= item.name
                            |
                            |
                            span.uk-text-meta.uk-text-xsmall= item.quantity

            div.uk-card-body
              button.uk-button.uk-button-default.uk-width-1-1
                +icon("close", ".75")(class="uk-margin-xsmall-right")
                | Reset all filters

    //- Content
    div.uk-width-expand
      include /partials/_products

================================================
FILE: src/templates/partials/_article.pug
================================================
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod nisl nunc, a dictum magna laoreet eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

div.tm-wrapper.uk-text-center
  figure
    a(href="images/articles/macbook-photo.jpg")
      img(src="images/articles/macbook-photo.jpg"
          alt="MacBook Pro")
    figcaption MacBook Pro

p Sed sit amet ante eget nunc dictum auctor sagittis in libero. Aliquam ultricies tincidunt nisi, a vestibulum nisi tempor vitae. Praesent fermentum sem semper fermentum ultrices. Duis eleifend vel sapien dignissim auctor. Vestibulum at commodo leo. In vitae eros ut sapien egestas venenatis non sit amet elit. In gravida vitae ante a rutrum.

h2 Touch Bar
p Vivamus ornare tortor elit, sed rutrum felis iaculis in. Nunc ut molestie neque. Aenean vitae elementum arcu, at rutrum ligula. Pellentesque fringilla dictum viverra. Vestibulum eu ipsum nec risus pharetra iaculis. Donec quis nulla orci. Suspendisse eget dictum augue, et lobortis justo. Suspendisse velit dui, sollicitudin quis velit nec, tincidunt consequat arcu.

h2 Retina Display
p Pellentesque dictum imperdiet rutrum. Vestibulum egestas quam eget maximus rutrum. Etiam blandit a dolor laoreet vulputate. Nulla ullamcorper ipsum et libero finibus, vitae vestibulum odio feugiat.

figure.uk-text-center
  a(href="images/articles/macbook-promo-4.jpg")
    img(src="images/articles/macbook-promo-4.jpg"
        alt="MacBook Pro")

h2 Force Touch Trackpad
p Vivamus ornare tortor elit, sed rutrum felis iaculis in. Nunc ut molestie neque. Aenean vitae elementum arcu, at rutrum ligula. Pellentesque fringilla dictum viverra. Vestibulum eu ipsum nec risus pharetra iaculis. Donec quis nulla orci. Suspendisse eget dictum augue, et lobortis justo. Suspendisse velit dui, sollicitudin quis velit nec, tincidunt consequat arcu.

div.tm-wrapper
  figure.tm-ratio.tm-ratio-16-9
    iframe(
      src="https://www.youtube.com/embed/WVPRkcczXCY"
      frameborder="0"
      allow="autoplay; encrypted-media"
      allowfullscreen)

p Ut arcu lacus, tempus bibendum purus sed, iaculis sollicitudin sapien. Donec quis imperdiet arcu. Ut sagittis ipsum diam, nec tempor ex fermentum a. Nam ac vehicula erat. Curabitur id congue risus, vel iaculis enim. Donec tristique lacinia velit eu fringilla. Mauris lectus enim, aliquet eu dolor sed, porta vehicula lacus. Etiam luctus egestas scelerisque. Sed sit amet metus ante. Cras pulvinar sollicitudin nisl nec egestas. Maecenas vitae velit ut urna vestibulum venenatis ut vel ex. Quisque sit amet mattis ante. Duis blandit nisl non commodo rutrum. Nulla in velit ut arcu efficitur laoreet ut eu mauris. Duis condimentum vulputate consequat. Vestibulum aliquet suscipit purus.

figure(uk-slideshow)
  div.uk-position-relative.uk-visible-toggle.uk-light
    ul.uk-slideshow-items
      li
        img(
          src="images/articles/macbook-promo-1.jpg"
          alt="MacBook Pro"
          uk-cover)
      li
        img(
          src="images/articles/macbook-promo-2.jpg"
          alt="MacBook Pro"
          uk-cover)

    a.uk-position-center-left.uk-position-small.uk-hidden-hover(
      href="#"
      uk-slidenav-previous
      uk-slideshow-item="previous")
    a.uk-position-center-right.uk-position-small.uk-hidden-hover(
      href="#"
      uk-slidenav-next
      uk-slideshow-item="next")

  ul.uk-slideshow-nav.uk-dotnav.uk-flex-center.uk-margin

p Mauris dignissim non nulla quis sollicitudin. Maecenas quis orci dui. Suspendisse pharetra facilisis metus, at venenatis nisl convallis et. Curabitur vulputate eget nisl sed dignissim. Sed eget metus ut orci volutpat gravida.

blockquote.twitter-tweet(data-lang="en")
  p(lang="en" dir="ltr")
    | Mophie&apos;s latest battery pack is powerful enough to charge your 15-inch MacBook Pro
    a(href="https://t.co/jN4RzcxOyG") https://t.co/jN4RzcxOyG
    a(href="https://t.co/5oJBKZRVBx") pic.twitter.com/5oJBKZRVBx
  | &mdash; The Verge (@verge)
  a(href="https://twitter.com/verge/status/948539601265872896?ref_src=twsrc%5Etfw") January 3, 2018
script(src="https://platform.twitter.com/widgets.js" charset="utf-8" async)

p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem urna, accumsan nec velit et, convallis tincidunt enim. Proin sollicitudin, metus at interdum tempus, velit mi posuere nisl, nec viverra ligula lorem sit amet felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

table(class="uk-table " +
            "uk-table-large " +
            "uk-table-middle " +
            "uk-table-divider " +
            "uk-table-justify " +
            "uk-table-responsive")

  thead
    tr
      th
      th.uk-width-1-4.uk-text-center MacBook Pro 13"
      th.uk-width-1-4.uk-text-center MacBook Pro 13" with Touch Bar
      th.uk-width-1-4.uk-text-center MacBook Pro 15" with Touch Bar

  tbody
    tr
      th Dimensions
      td 0.59 × 11.97 × 8.36&nbsp;inches
      td 0.59 × 11.97 × 8.36&nbsp;inches
      td 0.61 × 13.75 × 9.48&nbsp;inches
    tr
      th Weight
      td 3.02&nbsp;pounds
      td 3.02&nbsp;pounds
      td 4.02&nbsp;pounds
    tr
      th Display
      td 13.3" 2560×1600,<br>60Hz Retina Display
      td 13.3" 2560×1600,<br>60Hz Retina Display
      td 15.4" 2880×1800,<br>60Hz Retina Display
    tr
      th Inputs
      td 2 × USB-C Ports,<br>1 × 3.5mm Headphone Jack
      td 4 × USB-C Ports,<br>1 × 3.5mm Headphone Jack
      td 4 × USB-C Ports,<br>1 × 3.5mm Headphone Jack
    tr
      th Battery Life
      td Approximately 10&nbsp;hours
      td Approximately 10&nbsp;hours
      td Approximately 10&nbsp;hours

p Sed at diam aliquet, fringilla turpis ac, consequat ante. Duis id maximus purus. Cras rutrum erat non nibh accumsan, vitae maximus sapien elementum. Maecenas tellus libero, vulputate vitae mi eu, volutpat ornare felis. Nulla malesuada nunc urna, quis rutrum massa consequat id. Pellentesque elit diam, dignissim a lorem eu, tincidunt mollis erat.

div.tm-wrapper
  figure.uk-text-center
    a(href="images/articles/macbook-promo-3.jpg")
      img(src="images/articles/macbook-promo-3.jpg"
          alt="MacBook Pro")
    figcaption 13-inch and 15-inch

p Sed at diam aliquet, fringilla turpis ac, consequat ante. Duis id maximus purus. Cras rutrum erat non nibh accumsan, vitae maximus sapien elementum. Maecenas tellus libero, vulputate vitae mi eu, volutpat ornare felis. Nulla malesuada nunc urna, quis rutrum massa consequat id. Pellentesque elit diam, dignissim a lorem eu, tincidunt mollis erat.

blockquote(cite="#")
  p.uk-margin-small-bottom You can converge a toaster and refrigerator, but these things are probably not going to be pleasing to the user.
  footer Tim Cook

================================================
FILE: src/templates/partials/_cart-offcanvas.pug
================================================
div#cart-offcanvas(uk-offcanvas="overlay: true; flip: true")
  aside.uk-offcanvas-bar.uk-padding-remove
    div(class="uk-card " +
              "uk-card-default " +
              "uk-card-small " +
              "uk-height-1-1 " +
              "uk-flex " +
              "uk-flex-column " +
              "tm-shadow-remove")

      header.uk-card-header.uk-flex.uk-flex-middle
        div.uk-grid-small.uk-flex-1(uk-grid)
          div.uk-width-expand
            div.uk-h3 Cart
          button.uk-offcanvas-close(type="button" uk-close)

      div.uk-card-body.uk-overflow-auto
        ul.uk-list.uk-list-divider
          each product in products
            if product.isAddedToCart
              li.uk-visible-toggle
                arttcle
                  div.uk-grid-small(uk-grid)

                    //- Image
                    div.uk-width-1-4
                      div.tm-ratio.tm-ratio-4-3
                        a.tm-media-box(href= product.href)
                          figure.tm-media-box-wrap
                            if product.image
                              img(src= product.image.small alt= product.name)
                            else
                              +icon("image", "3")(class="uk-text-muted")
                    //- Info
                    div.uk-width-expand
                      div.uk-text-meta.uk-text-xsmall= product.type
                      a.uk-link-heading.uk-text-small(href= product.href)= product.name
                      div.uk-margin-xsmall.uk-grid-small.uk-flex-middle(uk-grid)
                        div.uk-text-bolder.uk-text-small= product.price
                        div.uk-text-meta.uk-text-xsmall 1 × #{product.price}

                    //- Delete
                    div
                      a(class="uk-icon-link " +
                              "uk-text-danger " +
                              "uk-invisible-hover"
                        href="#"
                        uk-icon="icon: close; ratio: .75"
                        uk-tooltip="Remove")

      footer.uk-card-footer
        div.uk-grid-small(uk-grid)
          div.uk-width-expand.uk-text-muted.uk-h4 Subtotal
          div.uk-h4.uk-text-bolder $3148.00
        div(class="uk-grid-small " +
                  "uk-child-width-1-1 " +
                  "uk-child-width-1-2@m " +
                  "uk-margin-small" uk-grid)
          div
            a(class="uk-button uk-button-default uk-margin-small uk-width-1-1"
              href="cart.html") view cart
          div
            a(class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
              href="checkout.html") checkout


================================================
FILE: src/templates/partials/_footer.pug
================================================
section.uk-section.uk-section-secondary.uk-section-small.uk-light
  div.uk-container
    div(class="uk-grid-medium " +
              "uk-child-width-1-1 " +
              "uk-child-width-1-4@m"
        uk-grid)

      div
        a.uk-logo(href="index.html")
          img(src="images/logo-inverse.svg" width="90" height="32" alt="Logo")
        p.uk-text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris eros. Nulla quis ante sed tortor efficitur facilisis.
        ul.uk-iconnav
          each social in socials
            li: a(href="#" title= social.name uk-icon= social.icon)

      div
        nav.uk-grid-small.uk-child-width-1-2(uk-grid)
          div
            ul.uk-nav.uk-nav-default
              each item in footerMenuLeft
                li: a(href= item.href)= item.name
          div
            ul.uk-nav.uk-nav-default
              each item in footerMenuRight
                li: a(href= item.href)= item.name

      div
        ul.uk-list.uk-text-small
          li
            a.uk-link-muted(href="#")
              +icon("receiver")(class="uk-margin-small-right")
              span.tm-pseudo= shopInfo.phone
          li
            a.uk-link-muted(href="#")
              +icon("mail")(class="uk-margin-small-right")
              span.tm-pseudo= shopInfo.email
          li
            div.uk-text-muted
              +icon("location")(class="uk-margin-small-right")
              span!= shopInfo.address
          li
            div.uk-text-muted
              +icon("clock")(class="uk-margin-small-right")
              span= shopInfo.openingHours

      div
        form.uk-form-stacked
          label
            div.uk-form-label.uk-text-muted Subscribe for updates
            div.uk-inline.uk-width-1-1
              a.uk-form-icon.uk-form-icon-flip(href="#" uk-icon="mail")
              input.uk-input(type="email" placeholder="Your email" required)

        div.uk-margin.uk-text-small.uk-text-muted Shopping Categories icons by Jaro Sigrist from Noun Project




================================================
FILE: src/templates/partials/_head.pug
================================================
meta(charset="UTF-8")
meta(http-equiv="x-ua-compatible" content="ie=edge")
meta(name="viewport" content="width=device-width, initial-scale=1")
if page.title
  title= page.title


================================================
FILE: src/templates/partials/_header.pug
================================================
include ../components/_toolbar
include ../components/_navbar


================================================
FILE: src/templates/partials/_nav-offcanvas.pug
================================================
div#nav-offcanvas(uk-offcanvas="overlay: true")
  aside.uk-offcanvas-bar.uk-padding-remove
    div.uk-card.uk-card-default.uk-card-small.tm-shadow-remove

      header.uk-card-header.uk-flex.uk-flex-middle
        div
          a.uk-link-muted.uk-text-bold(href="#")= shopInfo.phone
          div.uk-text-xsmall.uk-text-muted(style="margin-top: -2px;")
            div!= shopInfo.address
            div= shopInfo.openingHours

      nav.uk-card-small.uk-card-body
        ul.uk-nav-default.uk-nav-parent-icon.uk-list-divider(uk-nav)
          each item in navbarMenu
            li(class= { "uk-parent": item.items })
              a(href= item.href)= item.name
              if item.items
                ul.uk-nav-sub.uk-list-divider
                  each category in item.items
                    li: a(href="subcategory.html")= category.name
                  if item.name === "Catalog"
                    li.uk-text-center
                      +link-to-all('see all categories', item.href)
                  if item.name === "Brands"
                    li.uk-text-center
                      +link-to-all('see all brands', item.href)
          li
            a(href="compare.html") Compare
              span.uk-badge.uk-margin-xsmall-left 3

      nav.uk-card-small.uk-card-body
        ul.uk-nav.uk-nav-default
          each item in toolbarMenu
            li: a(href= item.href)= item.name

      nav.uk-card-body
        ul.uk-iconnav.uk-flex-center
          each social in socials
            li: a(href="#" title= social.name uk-icon= social.icon)





================================================
FILE: src/templates/partials/_products.pug
================================================
div.uk-grid-medium.uk-child-width-1-1(uk-grid)

  //- Items
  div
    div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
      div#products.uk-grid-collapse.uk-child-width-1-1(uk-grid)

        //- Settings
        div.uk-card-header
          div.uk-grid-small.uk-flex-middle(uk-grid)

            //- Sorting
            div(class="uk-width-1-1 " +
                      "uk-width-expand@s " +
                      "uk-flex " +
                      "uk-flex-center " +
                      "uk-flex-left@s " +
                      "uk-text-small")

              span.uk-margin-small-right.uk-text-muted Sort by:

              ul.uk-subnav.uk-margin-remove
                li.uk-active.uk-padding-remove
                  a.uk-text-lowercase(href="#") relevant
                    +icon("chevron-down", ".5")(class="uk-margin-xsmall-left")
                li
                  a.uk-text-lowercase(href="#") price
                li
                  a.uk-text-lowercase(href="#") newest

            //- Filters button & change view
            div(class="uk-width-1-1 uk-width-auto@s uk-flex uk-flex-center uk-flex-middle")

              //- Filters button
              button(class="uk-button uk-button-default uk-button-small uk-hidden@m"
                     uk-toggle="target: #filters")
                +icon("settings", ".75")(class="uk-margin-xsmall-right")
                | Filters

              //- Change view
              div.tm-change-view.uk-margin-small-left
                ul(class="uk-subnav uk-iconnav js-change-view"
                   uk-switcher)
                  li
                    a.uk-active(data-view="grid"
                                uk-icon="grid"
                                uk-tooltip="Grid")
                  li
                    a(data-view="list"
                      uk-icon="list"
                      uk-tooltip="List")

        //- Items
        div
          div(class="uk-grid-collapse " +
                    "uk-child-width-1-3 " +
                    "tm-products-grid " +
                    "js-products-grid"
              uk-grid)
            each product in products
              +product(product)

        //- Load more
        div
          button.uk-button.uk-button-default.uk-button-large.uk-width-1-1(
            style="border-top-left-radius: 0; border-top-right-radius: 0;")
            +icon("plus", ".75")(class="uk-margin-small-right")
            span Load more

  //- Pagination
  div
    ul.uk-pagination.uk-flex-center
      li.uk-active: span 1
      li: a(href="#") 2
      li: a(href="#") 3
      li: a(href="#") 4
      li: a(href="#") 5
      li.uk-disabled: span …
      li: a(href="#") 20
      li: a(href="#"): span(uk-pagination-next)