!!! 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' }
    = Rack::Csrf.csrf_metatag(env)
    %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
    / Logout Modal
    #logoutModal.modal.fade{ tabindex: -1, role: 'dialog', 'aria-hidden': 'true' }
      .modal-dialog{ role: 'document' }
        .modal-content
          .modal-header
            %h5.modal-title Ready to Leave?
            %button.close{ type: 'button', 'data-dismiss': 'modal', 'aria-label': 'Close' }
              %span{ 'aria-hidden': 'true' } ×
          .modal-body
            Select "Logout" below if you are ready to end your current session.
          .modal-footer
            %button.btn.btn-secondary{ type: 'button', 'data-dismiss': 'modal' } Cancel
            = delete_form_tag("#{settings.map_path}/auth") do
              %button.btn.btn-primary{ type: 'submit' } Logout
    / 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'

            = 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/popper.js/1.12.9/umd/popper.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();
        });