!!! 5
%html{ lang: 'en' }
  %head
    %meta{ charset: 'utf-8' }
    %meta{ 'http-equiv' => 'X-UA-Compatible', 'content' => 'IE=edge,chrome=1' }
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
    %meta{ name: 'theme-color', content: '#ffffff' }
    %link{ rel: 'manifest', href: '/manifest.json' }
    %link{ rel: 'icon', type: 'image/png', sizes: '32x32', href: '/images/favicon-32x32.png' }
    %link{ rel: 'icon', type: 'image/png', sizes: '16x16', href: '/images/favicon-16x16.png' }
    %link{ rel: 'apple-touch-icon', sizes: '76x76', href: '/images/apple-icon.png' }
    %link{ rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' }

    %title
      = config('ditty.title', 'Ditty')
      - if defined? title
        = "- #{title}"

    %meta{ name: 'description', content: '' }
    %meta{ name: 'author', content: '' }

    / Le styles
    %link{ rel: 'stylesheet', href: '/css/sb-admin-2.min.css', media: 'screen' }
    %link{ rel: 'stylesheet', href: '/css/styles.css', media: 'screen' }
    %link{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css', media: 'screen' }
  %body#page-top
    / Page Wrapper
    #wrapper
      = haml :'partials/sidebar', locals: { title: (defined?(title) ? title : 'Ditty') }

      #content-wrapper.d-flex.flex-column
        #content
          = haml :'partials/topbar'
          .container-fluid
            / TODO
            / .row
            /   .col-md-12
            = haml :'partials/notifications'
            - if defined?(title) || defined?(actions)
              .row
                .col-md-9
                  %h1.text-dark.mb-2= defined?(title) ? title : ' '
                .col-md-3.text-right.mt-1
                  = haml :'partials/actions', locals: { actions: defined?(actions) ? actions : {} }
            - else
              %div{ style: 'padding-top: 20px' }

            = yield

        = haml :'partials/footer'

    / Scroll to Top Button
    %a.scroll-to-top.rounded{ href: '#page-top' }
      %i.fas.fa-angle-up

    / Placed at the end of the document so the pages load faster
    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js' }
    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js' }
    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js' }
    / %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js' }
    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js' }
    %script{ type: 'text/javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js' }
    %script{ type: 'text/javascript', src: '/js/sb-admin-2.min.js' }
    %script{ type: 'text/javascript', src: '/js/scripts.js' }
    :javascript
        $(function() {
            $('.select2').select2();
        });