@extends('vendor.passport.layouts.app')

@section('content')
    <!-- begin:: Page -->
    <div class="kt-grid kt-grid--ver kt-grid--root">
        <div class="kt-grid kt-grid--hor kt-grid--root  kt-login kt-login--v3 kt-login--signin" id="kt_login">
            <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" style="background-image: url({{ asset('images/bg/bg-3.jpg') }});">
                <div class="kt-grid__item kt-grid__item--fluid kt-login__wrapper">
                    <div class="kt-login__container">
                        <div class="kt-login__logo">
                            <a href="javascript:void(0)">
                                <img src="{{ asset('images/logo_black.svg') }}">
                            </a>
                        </div>
                        <div class="passport-authorize">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-md-12">
                                        <div class="card card-default">
                                            <div class="card-header">
                                                Authorization Request
                                            </div>
                                            <div class="card-body">
                                                <!-- Introduction -->
                                                <p><strong>{{ $client->name }}</strong> is requesting permission to access your account.</p>

                                                <!-- Scope List -->
                                                @if (count($scopes) > 0)
                                                    <div class="scopes">
                                                        <p><strong>This application will be able to:</strong></p>

                                                        <ul>
                                                            @foreach ($scopes as $scope)
                                                                <li>{{ $scope->description }}</li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                @endif

                                                <div class="buttons">
                                                    <!-- Authorize Button -->
                                                    <form method="post" action="{{ route('passport.authorizations.approve') }}">
                                                        {{ csrf_field() }}

                                                        <input type="hidden" name="state" value="{{ $request->state }}">
                                                        <input type="hidden" name="client_id" value="{{ $client->id }}">
                                                        <button type="submit" class="btn btn-success btn-approve">Authorize</button>
                                                    </form>

                                                    <!-- Cancel Button -->
                                                    <form method="post" action="{{ route('passport.authorizations.deny') }}">
                                                        {{ csrf_field() }}
                                                        {{ method_field('DELETE') }}

                                                        <input type="hidden" name="state" value="{{ $request->state }}">
                                                        <input type="hidden" name="client_id" value="{{ $client->id }}">
                                                        <button class="btn btn-danger">Cancel</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .passport-authorize .container {
            margin-top: 30px;
        }

        .passport-authorize .scopes {
            margin-top: 20px;
        }

        .passport-authorize .buttons {
            margin-top: 25px;
            text-align: center;
        }

        .passport-authorize .btn {
            width: 125px;
        }

        .passport-authorize .btn-approve {
            margin-right: 15px;
        }

        .passport-authorize form {
            display: inline;
        }

        .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container {
            width: auto!important;
        }
    </style>
@endpush