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

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

    <!-- Вертикальный список шагов -->
    <div class="instruction-steps">
        <div class="step-item">
            <div class="step-number">1</div>
            <div class="step-content">
                Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
            </div>
        </div>
        <div class="step-item">
            <div class="step-number">2</div>
            <div class="step-content">
                Авторизуйтесь в Яндексе (если ещё не вошли)
            </div>
        </div>
        <div class="step-item">
            <div class="step-number">3</div>
            <div class="step-content">
                Нажмите «Разрешить»
            </div>
        </div>
        <div class="step-item">
            <div class="step-number">4</div>
            <div class="step-content">
                Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
            </div>
        </div>
    </div>

    <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>