html
    head
        title Flitter
        meta(name="viewport" content="width=device-width, initial-scale=1")
        link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous")
        script(src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous")
        script(src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous")
        script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous")
        script(src="https://kit.fontawesome.com/5043ba9cc5.js" crossorigin="anonymous")
        style(type="text/css").
            @import url('https://fonts.googleapis.com/css?family=Rajdhani');
            html,
            body {
                background-color:#343a40;
            }
            #intro {
                color: #cccccc;
                text-align: center;
            }
            #login {
                width: 50em;
            }
            .login-container {
                display: grid;
                align-items: center;
                border: 4px solid #ccc;
                padding: 0.01em 0.02em;
                border-radius: .35rem;
            }
            .login-container div a {
                width: 100%;
            }
            .icons {
                font-size: 1.6em;
                padding: 1.1em 1.1em 1.1em 1.1em;
            }

    body
    .container#intro
        h1 Hi, Welcome to #{app_name}. 
        h2 Choose your login method.

    .container#login
        .login-container
            div
                a.btn.btn-light.btn-lg(href="/auth/flitter/login")
                    i.icons.fas.fa-sign-in-alt
                    span Local Login
            div    
                a.btn.btn-light.btn-lg(href="/auth/github_oauth/login")
                    i.icons.fab.fa-github
                    span Login with GitHub
            div
                a.btn.btn-light.btn-lg.disabled(href="google.com")
                    i.icons.fab.fa-google
                    span Login with Google
            div
                a.btn.btn-light.btn-lg.disabled(href="microsoft.com")
                    i.icons.fab.fa-microsoft
                    span Login with Microsoft
            div
                a.btn.btn-light.btn-lg.disabled(href="microsoft.com")
                    i.icons.fab.fa-apple
                    span Login with Apple