<!doctype html>
<html lang="en_EN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>
        <%= htmlWebpackPlugin.options.strings.title %> <%= htmlWebpackPlugin.options.strings.version %> | <%= htmlWebpackPlugin.options.strings.description %>
    </title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="plain-ui.css">
</head>

<body class="overflow-x-hidden">

    <header class="header">
        <div class="bar">
            <div class="bar__start">
                <div class="m-top-4 m-bottom-4 h4">
                    <%= htmlWebpackPlugin.options.strings.title %> <%= htmlWebpackPlugin.options.strings.version %>
                </div>
            </div>
            <div class="bar__main justify-center">
                <div class="tabs tabs--contrast">
                    <a href="index.html" class="tabs__item <% if (htmlWebpackPlugin.options.current === 'index.html') { %>tabs__item--selected<% } %>">
                        Basics
                    </a>
                    <a href="components.html" class="tabs__item <% if (htmlWebpackPlugin.options.current === 'components.html') { %>tabs__item--selected<% } %>">
                        Components
                    </a>
                    <a href="layout.html" class="tabs__item <% if (htmlWebpackPlugin.options.current === 'layout.html') { %>tabs__item--selected<% } %>">
                        Layout
                    </a>
                    <a href="helpers.html" class="tabs__item <% if (htmlWebpackPlugin.options.current === 'helpers.html') { %>tabs__item--selected<% } %>">
                        Helpers
                    </a>
                </div>
            </div>
        </div>
    </header>

    <%= htmlWebpackPlugin.options.content %>

    <footer class="site-footer m-top-5">
        <div class="bar">
            <div class="bar__main">

            </div>
        </div>
    </footer>
</body>

</html