@* Компонент с инструкцией по получению токена Яндекс.Музыки *@

<MudContainer Class="pa-4">
    <MudText Typo="Typo.body2" GutterBottom>
        Токен нужен для доступа к вашим плейлистам. Получите его один раз:
    </MudText>

    <!-- Вертикальный список шагов -->
    <MudStack Class="my-4">
        <MudStack Row AlignItems="AlignItems.Center">
            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
            <MudText>
                Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
            </MudText>
        </MudStack>
        
        <MudStack Row AlignItems="AlignItems.Center">
            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
            <MudText>
                Авторизуйтесь в Яндексе (если ещё не вошли)
            </MudText>
        </MudStack>
        
        <MudStack Row AlignItems="AlignItems.Center">
            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
            <MudText>
                Нажмите «Разрешить»
            </MudText>
        </MudStack>
        
        <MudStack Row AlignItems="AlignItems.Center">
            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
            <MudText>
                Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
            </MudText>
        </MudStack>
    </MudStack>

    <MudAlert Severity="Severity.Info" Class="mt-4">
        Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>
    </MudAlert>

    <MudAlert Severity="Severity.Warning" Class="mt-2">
        Токен даёт доступ к вашим плейлистам. Никому его не сообщайте.
    </MudAlert>
    
    <MudAlert Severity="Severity.Success" Class="mt-2" Icon="@Icons.Material.Filled.Security">
        Ваш токен сохраняется в зашифрованном виде и никому не передаётся.
    </MudAlert>
</MudContainer>

<style>
    .instruction-steps {
        margin: 16px 0;
    }
    .step-item {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    .step-number {
        width: 28px;
        height: 28px;
        background-color: var(--mud-palette-primary);
        color: white;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        flex-shrink: 0;
    }
    .step-content {
        flex: 1;
        font-size: 0.9rem;
    }
</style>