{{ define "header" }}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Online Boutique</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/styles/styles.css">
    <link rel="stylesheet" type="text/css" href="/static/styles/cart.css">
    <link rel="stylesheet" type="text/css" href="/static/styles/order.css">
    <link rel='shortcut icon' type='image/x-icon' href='/static/favicon.ico' />
</head>

<body>
    <header>
        <div class="navbar">
            <div class="container d-flex justify-content-between">
                <div class="h-free-shipping">Free shipping with $75 purchase! &nbsp;&nbsp;</div>


                {{ if $.show_currency }}
                <div class="h-controls">
                    <div class="h-control">
                        <img src="/static/icons/Hipster_CurrencyIcon.svg" alt="icon" class="icon" />
                        <form method="POST" class="controls-form" action="/setCurrency" id="currency_form" >
                            <select name="currency_code" onchange="document.getElementById('currency_form').submit();">
                                    {{range $.currencies}}
                                <option value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
                                {{end}}
                            </select>
                        </form>
                        <img src="/static/icons/Hipster_DownArrow.svg" alt="icon" class="icon arrow" />
                    </div>
                </div>
                {{ end }}

            </div>
        </div>
        <div class="navbar sub-navbar">
            <div class="container d-flex justify-content-between">
                <a href="/" class="navbar-brand d-flex align-items-center">
                    <img src="/static/icons/Hipster_NavLogo.svg" alt="logo" class="logo" />
                </a>
                <div class="controls">
                    <a href="/cart">
                        <img src="/static/icons/Hipster_CartIcon.svg" alt="cart-icon" class="logo" />
                        <span>Cart
                            {{ if $.cart_size }}
                            <span class="badge badge-blue">{{$.cart_size}}</span>
                            {{ end }}
                        </span>
                    </a>
                </div>
            </div>
        </div>

    </header>
    {{end}}