@extends('oauth.layout')

@section('title', '授权失败')

@push('styles')
<style>
    .error-content {
        position: relative;
        z-index: 2;
        padding-top: 32vw; /* 120px */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 13.33vw; /* 50px */
    }

    /* 错误图标 */
    .error-icon {
        width: 21.33vw; /* 80px */
        height: 21.33vw;
        border-radius: 50%;
        background: #FFF0F0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6.4vw; /* 24px */
    }

    .error-icon svg {
        width: 10.67vw; /* 40px */
        height: 10.67vw;
        color: #E53935;
    }

    /* 错误标题 */
    .error-title {
        font-size: 5.33vw; /* 20px */
        font-weight: 600;
        color: #000000;
        margin-bottom: 3.2vw; /* 12px */
    }

    /* 错误消息 */
    .error-message {
        font-size: 4vw; /* 15px */
        color: #666666;
        text-align: center;
        margin-bottom: 2.13vw; /* 8px */
        max-width: 80vw; /* 300px */
        line-height: 1.5;
    }

    /* 错误代码 */
    .error-code {
        font-size: 3.47vw; /* 13px */
        color: #999999;
        margin-bottom: 10.67vw; /* 40px */
    }

    /* 返回按钮 */
    .back-btn {
        width: 53.33vw; /* 200px */
        height: 13.33vw; /* 50px */
        background: #F5F5F5;
        border: none;
        border-radius: 8.8vw; /* 33px */
        font-size: 4.27vw; /* 16px */
        font-weight: 500;
        color: #666666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .back-btn:active {
        background: #EEEEEE;
    }
</style>
@endpush

@section('content')
<div class="page-content">
    <!-- 渐变背景 -->
    <div class="gradient-bg"></div>

    <div class="error-content">
        <!-- 错误图标 -->
        <div class="error-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </div>

        <!-- 错误标题 -->
        <div class="error-title">授权失败</div>

        <!-- 错误消息 -->
        <div class="error-message">{{ $message }}</div>

        <!-- 错误代码 -->
        <div class="error-code">错误代码：{{ $error }}</div>

        <!-- 返回按钮 -->
        <button onclick="window.history.back()" class="back-btn">返回</button>
    </div>
</div>
@endsection