@extends('layouts.app')

@section('content')
    <div class="container">
        <div id="window">
            Um Ihren Account mit AskDante zu verknüpfen <br>melden Sie sich bitte mit Ihrem AskDante-Zugang an: <br><br>
            <div class="row">
                <div class="col-md-6">
                    <label for="mail">Email:</label>
                    <input type="email" id="mail" class="form-control">
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <label for="password">Passwort:</label>
                    <input type="password" id="password" class="form-control">
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-2">
                    <button class="btn btn-primary" onclick="loginAskdante()">Login</button>
                </div>
                <div class="col-md-4">
                    <button class="btn btn-default" onclick="loginLater()">Später</button>
                </div>
            </div>
            <br>
            <div class="row hidden messages" id="loadingdiv">
                <div class="col-md-1">
                    <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
                </div>
                <div class="col-md-4" id="textdiv">Überprüfe Zugangsdaten</div>
            </div>
            <div class="row hidden messages" id="faildiv">
                <div class="col-md-6" style="color: red;">Da ist etwas schiefgelaufen :(</div>
            </div>
            <div class="row hidden messages" id="successdiv">
                <div class="col-md-6" style="color: green;">Erfolgreich verbunden!</div>
            </div>
        </div>
    </div>

    <br><br>
   <!-- <button class="btn btn-primary" id="testdownloadbtn">Testdownload</button>-->

    <style>
        body {
            background: url(http://i.imgur.com/k8BtMvj.jpg);
            background-size: cover;
        }

        #window {
            position: relative;
            width: 50%;
            margin: 0 auto;
            overflow: hidden;
            padding: 20px;
        }

        #window:after {
            content: '';
            position: absolute;
            width: 1100%;
            height: 1100%;
            top: 20px;
            right: -500%;
            background: rgba(255, 255, 255, .8);
            transform-origin: 54% 0;
            transform: rotate(45deg);
            z-index: -1;
        }
    </style>
@endsection