<!DOCTYPE html>

{% macro axiosConfig(params) -%}
  axios.defaults.xsrfHeaderName = "{{params.header}}";
  axios.defaults.xsrfCookieName = "{{params.cookie}}";
{%- endmacro %}

<html>
<head>
  {% block head %}
    <title>{% block title %}Cordy{% endblock title %}</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    {% block extra_head %}
    {% endblock extra_head %}
  {% endblock head %}
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        {% block menu_bar %}
          <v-app-bar color="pink darken-3" dark>
            <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
            <v-toolbar-title>{% block page_title %}Cordy {% endblock page_title %}</v-toolbar-title>
          </v-app-bar>
          <v-navigation-drawer v-model="drawer" absolute temporary>
            <v-list nav dense>
              <v-list-item-group>
                {% block menu %}
                  <v-list-item href="/">
                    <v-list-item-icon>
                      <v-icon>mdi-home</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Home</v-list-item-title>
                  </v-list-item>
                {% endblock menu %}
              </v-list-item-group>
            </v-list>
          </v-navigation-drawer>
        {% endblock menu_bar %}
        {% block content %}
        {% endblock content %}
      </v-main>
    </v-app>
  </div>
  {% block footerjs %}
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    {% block extra_js %}
    {% endblock extra_js %}
    {% block vue_app %}
    {% endblock vue_app %}
  {% endblock footerjs %}
</body>
</html>
