ClubDirectionPreview.razor

A Razor panel that previews three club menu design directions. Renders mock home, store, collection and UI state pages with modals, filters, sorting and Russian/English labels. The preview does not change game data.

Rough Code
@using Sandbox
@using Sandbox.UI
@using Socer
@using System
@using System.Linq
@inherits PanelComponent

<root class="@($"cd-preview cd-v{Variant} {(Motion?"cd-motion":"")} cd-view-{View}")" style="position:absolute;left:0;top:0;width:100%;height:100%;">
    <div class="cd-designbar">
        <label>@T("МЕНЮ КЛУБА / ВАРИАНТЫ","CLUB MENUS / DIRECTIONS")</label>
        @for(int i=0;i<3;i++){var v=i;<button class="cd-design-option @(Variant==i?"cd-on":"")" onclick=@(()=>ChangeVariant(v))>@Direction(i)</button>}
        <button class="cd-design-option" onclick=@(()=>{Russian=!Russian;Revision++;})>@(Russian?"RU":"EN")</button>
        <button class="cd-design-option @(Stress?"cd-on":"")" onclick=@(()=>{Stress=!Stress;Revision++;})>@T("Длинные названия","Long labels")</button>
        <button class="cd-design-option @(Motion?"cd-on":"")" onclick=@(()=>{Motion=!Motion;Revision++;})>@T("Анимация","Motion")</button>
        <label class="cd-preview-tag">@T("МАКЕТ · БАЛАНС НЕ МЕНЯЕТСЯ","PREVIEW · BALANCE UNCHANGED")</label>
    </div>
    <div class="cd-app">
        <div class="cd-binder-spine"><span></span><span></span><span></span><span></span></div>
        <header class="cd-header">
            <div class="cd-brand"><img src="/crests/barceluna.png" /><div><label class="cd-brand-name">@ClubName</label><label class="cd-brand-detail">@T("СЕЗОН 05 · ПРЕМЬЕР-ЛИГА","SEASON 05 · PREMIER LEAGUE")</label></div></div>
            <label class="cd-header-edition">@T("ВАШ КЛУБ. ВАША КОЛЛЕКЦИЯ.","YOUR CLUB. YOUR COLLECTION.")</label>
            <div class="cd-wallet"><span class="cd-coin">●</span><label>2 400</label><span class="cd-wallet-divider"></span><img src="/store-packs/cup-token.svg" /><label>12</label></div>
            <button class="cd-icon-button cd-settings" onclick=@(()=>OpenModal("settings"))>⋯</button>
        </header>
        <nav class="cd-navigation">
            @foreach(var page in Pages){var p=page;<button class="cd-nav-button @(View==page?"cd-nav-active":"")" onclick=@(()=>Navigate(p))><span class="cd-nav-index">@PageNumber(page)</span><label>@PageName(page)</label><span class="cd-nav-arrow">↗</span></button>}
            <label class="cd-nav-caption">@T("ФУТБОЛ НАЧИНАЕТСЯ ЗДЕСЬ","THE CLUB STARTS HERE")</label>
        </nav>
        <main class="cd-content">
        @if(View=="home")
        {
            @if(Variant==0)
            {
                <div class="cd-home-top cd-enter"><div class="cd-collection-hero"><label class="cd-kicker">@T("ЭТА КОМАНДА — ВАША","THIS IS YOUR CLUB")</label><label class="cd-hero-title">@T("Большие победы\nначинаются с клуба.","Great wins\nstart at the club.")</label><label class="cd-hero-copy">@T("Собирайте игроков. Находите сочетания. Готовьте свой лучший состав.","Collect players. Find the connections. Build your best eleven.")</label><button class="cd-btn cd-primary cd-home-shop" onclick=@(()=>Navigate("store"))>@T("Выбрать новый пак","Find your next pack")<span>↗</span></button><div class="cd-hero-art"><div class="cd-hero-disc"></div><img class="cd-hero-pack" src="@PackArt(1)" /><div class="cd-hero-portrait"><img src="@Portrait(Samples[0])" /><label>@Samples[0].Overall</label></div><label class="cd-hero-art-tag">@T("СЛЕДУЮЩЕЕ УСИЛЕНИЕ?","YOUR NEXT SIGNING?")</label></div></div><div class="cd-next-chapter"><label class="cd-kicker">@T("СЛЕДУЮЩАЯ ГЛАВА","THE NEXT CHAPTER")</label><label class="cd-chapter-title">@T("Финальный\nкубок","The\nFinal Cup")</label><div class="cd-place-seal"><label>02</label><label>@T("МЕСТО В ЛИГЕ","LEAGUE PLACE")</label></div><label class="cd-chapter-copy">@T("27 очков. Остался последний тур. Топ-2 откроет финальный кубок.","27 points. One league round remains. Finish in the top two to unlock the Final Cup.")</label><button class="cd-btn cd-secondary" onclick=@(()=>OpenModal("cup"))>@T("Путь в финальный кубок","The road to the Final Cup")<span>→</span></button></div></div>
                <div class="cd-section-heading"><div><label class="cd-kicker">@T("ЛИЦА ВАШЕЙ КОМАНДЫ","FACES OF YOUR CLUB")</label><label class="cd-section-title">@T("Знакомый состав. Новые возможности.","Familiar faces. New possibilities.")</label></div><button class="cd-text-button" onclick=@(()=>Navigate("collection"))>@T("Вся коллекция →","View collection →")</button></div>
                <div class="cd-home-player-shelf">@foreach(var card in Samples.Take(4)){var c=card;<button class="cd-home-player" onclick=@(()=>OpenPlayer(c))><img src="@Portrait(card)" /><div><label>@DisplayName(card)</label><label>@($"{Role(card)} · {card.Overall}")</label></div><span>↗</span></button>}</div>
            }
            else if(Variant==1)
            {
                <div class="cd-editorial-home cd-enter"><div class="cd-editorial-story"><label class="cd-kicker">@T("КЛУБНЫЙ ВЫПУСК / № 05","CLUB EDITION / NO. 05")</label><label class="cd-editorial-headline">@T("Команда,\nкоторую\nвы собираете.","A team\nof your\nown making.")</label><label class="cd-editorial-deck">@T("У каждого игрока своя роль. У каждой карточки — место в истории клуба.","Every player has a role. Every card has a place in the club's story.")</label><button class="cd-btn cd-primary" onclick=@(()=>Navigate("collection"))>@T("ОТКРЫТЬ КОЛЛЕКЦИЮ","OPEN THE COLLECTION")<span>↗</span></button><div class="cd-edition-line"><label>FC BARCELUNA</label><label>@T("ОСНОВА / РЕЗЕРВ / ПОТЕНЦИАЛ","FIRST XI / RESERVES / POTENTIAL")</label></div></div><div class="cd-editorial-feature"><div class="cd-editorial-portrait"><img src="@Portrait(Samples[0])" /><label class="cd-editorial-rating">@Samples[0].Overall</label></div><div class="cd-editorial-caption"><label>@DisplayName(Samples[0])</label><button class="cd-text-button" onclick=@(()=>OpenPlayer(Samples[0]))>@T("Досье игрока →","Player dossier →")</button></div><div class="cd-editorial-invite"><label class="cd-kicker">@T("ПЕРЕД ФИНАЛЬНЫМ ТУРОМ","BEFORE THE FINAL ROUND")</label><label>@T("Сохранить топ-2.\nВыйти в главный кубок.","Hold the top two.\nReach the Final Cup.")</label><div><label>@T("27 очков / 13 матчей","27 points / 13 matches")</label><button class="cd-text-button" onclick=@(()=>OpenModal("cup"))>@T("Цель сезона ↗","Season goal ↗")</button></div></div></div></div>
                <div class="cd-editorial-shop-teaser"><label class="cd-kicker">@T("КЛУБНЫЙ КАТАЛОГ","THE CLUB CATALOGUE")</label><img src="@PackArt(1)" /><div><label>@PackName(1)</label><label>@T("Серебро, золото и шанс элиты.","Silver, gold and a chance of elite.")</label></div><label class="cd-teaser-price">1 200 ◈</label><button class="cd-btn cd-secondary" onclick=@(()=>Navigate("store"))>@T("В МАГАЗИН →","BROWSE PACKS →")</button></div>
            }
            else
            {
                <div class="cd-album-spread cd-enter"><div class="cd-album-page cd-album-clubpage"><label class="cd-album-page-label">@T("МОЙ КЛУБ / СТРАНИЦА 01","MY CLUB / PAGE 01")</label><div class="cd-album-club-sticker"><img src="/crests/barceluna.png" /><label>@ClubName</label><label>@T("СЕЗОН 05 · ПРЕМЬЕР-ЛИГА","SEASON 05 · PREMIER LEAGUE")</label></div><label class="cd-album-heading">@T("Соберите\nсвою историю.","Collect\nyour story.")</label><div class="cd-album-record"><label>02</label><div><label>@T("МЕСТО В ЛИГЕ","LEAGUE PLACE")</label><label>@T("27 очков · 13 матчей","27 points · 13 matches")</label></div><span class="cd-stamp">✓</span></div><button class="cd-btn cd-primary" onclick=@(()=>OpenModal("cup"))>@T("Путь в финальный кубок","Your road to the Final Cup")<span>↗</span></button></div><div class="cd-album-page cd-album-discover"><label class="cd-album-page-label">@T("ПОПОЛНЕНИЕ АЛЬБОМА / СТРАНИЦА 02","FILL THE ALBUM / PAGE 02")</label><div class="cd-album-card-pair">@foreach(var card in Samples.Take(2)){var c=card;<button class="cd-album-home-sticker" onclick=@(()=>OpenPlayer(c))><label>@($"{card.Overall} / {Role(card)}")</label><img src="@Portrait(card)" /><label>@DisplayName(card)</label></button>}</div><div class="cd-album-pack-teaser"><img src="@PackArt(1)" /><div><label class="cd-kicker">@T("СЛЕДУЮЩИЙ ПАК","YOUR NEXT PACK")</label><label>@PackName(1)</label><label>1 200 ◈</label></div><button class="cd-round-button" onclick=@(()=>Navigate("store"))>↗</button></div><button class="cd-btn cd-secondary" onclick=@(()=>Navigate("collection"))>@T("Перелистать коллекцию","Turn to the collection")<span>→</span></button></div></div>
            }
        }
        else if(View=="store")
        {
            <div class="cd-page-title cd-enter"><div><label class="cd-kicker">@T("УСИЛЕНИЕ КЛУБА","BUILD YOUR CLUB")</label><label class="cd-page-headline">@T(Variant==1?"Клубный каталог.":Variant==2?"Новые страницы.":"Найдите своё усиление.",Variant==1?"The club catalogue.":Variant==2?"New pages to fill.":"Find your next signing.")</label></div><label class="cd-page-aside">@T("1–2 футболиста + 1–3 дополнения в каждом паке","1–2 players + 1–3 extras in every pack")</label></div>
            <div class="cd-shop-toolbar"><div class="cd-segment"><button class="@(!CupPacks?"cd-filter-active":"")" onclick=@(()=>SetCurrency(false))>@T("За монеты","Coins")</button><button class="@(CupPacks?"cd-filter-active":"")" onclick=@(()=>SetCurrency(true))><img src="/store-packs/cup-token.svg" />@T("За кубки","Cup tokens")</button></div><label>@T("Покупайте паки за игровую валюту. Открывайте, когда удобно.","Buy with club currency. Open them whenever you're ready.")</label><button class="cd-text-button" onclick=@(()=>OpenModal("inventory"))>@T("Мои паки →","My packs →")</button></div>
            <div class="cd-pack-grid cd-enter">
            @foreach(int pack in CurrentOffers)
            {
                var index=pack;var offer=ScoutPacks.All[pack];var affordable=CanPreviewBuy(pack);
                <div class="cd-pack-product cd-pack-@pack @(affordable?"":"cd-unaffordable")"><div class="cd-pack-art"><label class="cd-product-index">@($"0{pack+1}")</label><img src="@PackArt(pack)" /><span class="cd-product-paperseal">@T(offer.UsesCupTokens?"КУБКОВЫЙ":"КЛУБНЫЙ",offer.UsesCupTokens?"CUP":"CLUB")</span></div><div class="cd-pack-copy"><label class="cd-pack-name">@PackName(pack)</label><label class="cd-pack-description">@PackDescription(pack)</label><div class="cd-pack-odds">@foreach(var tier in Odds(pack)){<span>@tier</span>}</div><div class="cd-pack-purchase"><label class="cd-price">@Price(pack)</label><button class="cd-btn cd-primary cd-view-pack" onclick=@(()=>OpenPack(index))>@T("Подробнее","View pack")<span>↗</span></button></div><label class="cd-affordability">@(affordable?T("Доступен вашему клубу","Available for your club"):Missing(pack))</label></div></div>
            }
            </div>
            <div class="cd-store-note"><span>i</span><label>@T("Шансы указаны для каждой карточки игрока. Повторы возможны. Купленный пак хранится в инвентаре.","Odds apply to each player card. Duplicates are possible. Purchased packs stay in your inventory.")</label></div>
        }
        else if(View=="collection")
        {
            <div class="cd-page-title cd-enter"><div><label class="cd-kicker">@T("У КАЖДОЙ КАРТОЧКИ ЕСТЬ ИСТОРИЯ","EVERY CARD HAS A STORY")</label><label class="cd-page-headline">@T(Variant==1?"Лица клуба.":Variant==2?"Страница за страницей.":"Ваша коллекция.",Variant==1?"The faces of the club.":Variant==2?"Page by page.":"Your collection.")</label></div><label class="cd-page-aside">@T("8 карточек для сравнения оформления","8 cards to compare the directions")</label></div>
            <div class="cd-collection-toolbar"><div class="cd-filter-chips">@foreach(string role in Filters){var f=role;<button class="cd-chip @(CollectionFilter==role?"cd-filter-active":"")" onclick=@(()=>SetFilter(f))>@FilterName(role)</button>}</div><div class="cd-sort-wrap"><button class="cd-dropdown" onclick=@(()=>{DropdownOpen=!DropdownOpen;Revision++;})>@T(SortByName?"По имени":"По рейтингу",SortByName?"Name":"Rating")<span>⌄</span></button>@if(DropdownOpen){<div class="cd-dropdown-menu"><button onclick=@(()=>SetSort(false))>@T("По рейтингу","Rating")</button><button onclick=@(()=>SetSort(true))>@T("По имени","Name")</button></div>}</div></div>
            <div class="cd-player-grid cd-enter">
            @foreach(var player in VisibleCards)
            {
                var card=player;
                <button class="cd-player-card [email protected](card)" onclick=@(()=>OpenPlayer(card))><div class="cd-player-topline"><label>@card.Overall</label><label>@Role(card)</label><span>@T("КЛУБ","CLUB")</span></div><div class="cd-player-portrait"><img src="@Portrait(card)" /><span class="cd-player-country">@card.CountryCode</span></div><div class="cd-player-copy"><label class="cd-player-name">@DisplayName(card)</label><label class="cd-player-caption">@T(card.Country=="Russia"?"Россия":card.Country=="England"?"Англия":card.Country=="Spain"?"Испания":card.Country=="France"?"Франция":card.Country=="Brazil"?"Бразилия":card.Country=="Germany"?"Германия":"Япония",card.Country)</label><div class="cd-player-attributes"><label>@($"PAC {card.Pace}")</label><label>@($"PAS {card.Passing}")</label><label>@($"SHO {card.Shooting}")</label></div></div><span class="cd-player-open">↗</span></button>
            }
            </div>
            <div class="cd-collection-footer"><label>@T("Нажмите на карточку, чтобы открыть досье игрока.","Select a card to open the player dossier.")</label><button class="cd-text-button" onclick=@(()=>Navigate("store"))>@T("Пополнить коллекцию →","Grow your collection →")</button></div>
        }
        else
        {
            <div class="cd-page-title"><div><label class="cd-kicker">@T("КНОПКИ И ОБРАТНАЯ СВЯЗЬ","BUTTONS AND FEEDBACK")</label><label class="cd-page-headline">@T("Система в деталях.","The system, up close.")</label></div><label class="cd-page-aside">@T("Состояния показаны одновременно","States shown together")</label></div>
            <div class="cd-state-board cd-enter"><div class="cd-state-group"><label class="cd-kicker">@T("ОСНОВНОЕ ДЕЙСТВИЕ","PRIMARY ACTION")</label><div class="cd-state-row"><div class="cd-state-example"><label>@T("Обычная","Default")</label><button class="cd-btn cd-primary" onclick=@(()=>SetFeedback("clicked"))>@T("Купить пак","Buy pack")<span>↗</span></button></div><div class="cd-state-example"><label>@T("Наведение","Hover")</label><button class="cd-btn cd-primary cd-hover" onclick=@(()=>SetFeedback("clicked"))>@T("Купить пак","Buy pack")<span>↗</span></button></div><div class="cd-state-example"><label>@T("Нажатие","Pressed")</label><button class="cd-btn cd-primary cd-pressed" onclick=@(()=>SetFeedback("clicked"))>@T("Купить пак","Buy pack")<span>↗</span></button></div><div class="cd-state-example"><label>@T("Фокус","Focus")</label><button class="cd-btn cd-primary cd-focus" onclick=@(()=>SetFeedback("clicked"))>@T("Купить пак","Buy pack")<span>↗</span></button></div><div class="cd-state-example"><label>@T("Недоступна","Disabled")</label><button class="cd-btn cd-primary cd-disabled" disabled="@true">@T("Не хватает 600 ◈","Need 600 ◈")</button></div></div></div><div class="cd-state-group"><label class="cd-kicker">@T("ВТОРИЧНЫЕ ДЕЙСТВИЯ","SECONDARY ACTIONS")</label><div class="cd-state-row"><button class="cd-btn cd-secondary" onclick=@(()=>SetFeedback("clicked"))>@T("Назад","Back")<span>←</span></button><button class="cd-text-button" onclick=@(()=>OpenPack(1))>@T("Шансы выпадения →","View pack odds →")</button><button class="cd-round-button" onclick=@(()=>OpenModal("cup"))>↗</button><button class="cd-icon-button" onclick=@(()=>OpenModal("settings"))>⋯</button></div></div><div class="cd-state-group"><label class="cd-kicker">@T("ВКЛАДКИ, ФИЛЬТРЫ И ВЫБОР","TABS, FILTERS AND SELECTION")</label><div class="cd-state-row"><div class="cd-segment"><button class="cd-filter-active" onclick=@(()=>SetFeedback("clicked"))>@T("За монеты","Coins")</button><button onclick=@(()=>SetFeedback("clicked"))>@T("За кубки","Cup tokens")</button></div><button class="cd-chip cd-filter-active" onclick=@(()=>SetFeedback("clicked"))>@T("Все игроки","All players")</button><button class="cd-chip" onclick=@(()=>SetFeedback("clicked"))>@T("Нападающие","Forwards")</button><button class="cd-dropdown" onclick=@(()=>Navigate("collection"))>@T("По рейтингу","Rating")<span>⌄</span></button></div></div><div class="cd-state-group"><label class="cd-kicker">@T("ДИАЛОГИ","DIALOGUES")</label><div class="cd-state-row"><button class="cd-btn cd-primary" onclick=@(()=>OpenPack(1))>@T("Покупка пака","Pack purchase")<span>↗</span></button><button class="cd-btn cd-secondary" onclick=@(()=>OpenPlayer(Samples[0]))>@T("Досье игрока","Player dossier")<span>↗</span></button><button class="cd-btn cd-secondary" onclick=@(()=>OpenModal("cup"))>@T("Важное решение","Important choice")<span>↗</span></button></div></div></div>
        }
        </main>
        <footer class="cd-footer"><label>@T("КЛУБ / КОЛЛЕКЦИЯ / КАРЬЕРА","CLUB / COLLECTION / CAREER")</label><label>@T("Сезон 05 · 2-е место · 27 очков","Season 05 · 2nd place · 27 points")</label><label>© SOCER</label></footer>
    </div>
    @if(!string.IsNullOrEmpty(Feedback)) {<div class="cd-feedback"><span>✓</span><label>@T("Макет: действие показано. Валюта и сохранение не меняются.","Preview: action shown. Currency and save remain unchanged.")</label><button onclick=@(()=>{Feedback="";Revision++;})>×</button></div>}
    @if(!string.IsNullOrEmpty(Modal))
    {
        <div class="cd-modal-shade"><div class="cd-modal cd-modal-@Modal cd-enter"><button class="cd-modal-close cd-icon-button" onclick=@CloseModal>×</button>
        @if(Modal=="pack")
        {
            var offer=ScoutPacks.All[SelectedPack];
            <div class="cd-modal-art"><label class="cd-kicker">@T("ПОПОЛНЕНИЕ КОЛЛЕКЦИИ","GROW THE COLLECTION")</label><img src="@PackArt(SelectedPack)" /><label>@T("1–2 футболиста + 1–3 дополнения","1–2 players + 1–3 extras")</label></div><div class="cd-modal-copy"><label class="cd-kicker">@T("ПОДТВЕРЖДЕНИЕ ПОКУПКИ","CONFIRM PURCHASE")</label><label class="cd-modal-title">@PackName(SelectedPack)</label><label class="cd-modal-description">@PackDescription(SelectedPack)</label><div class="cd-odds-details">@foreach(var odd in Odds(SelectedPack)){<label>@odd</label>}</div><label class="cd-small-copy">@T("Шанс указан для каждой карточки игрока. Повторы возможны. Пак сохранится в инвентаре.","Odds apply to each player card. Duplicates are possible. The pack stays in your inventory.")</label><div class="cd-modal-total"><label>@T("Один пак","One pack")</label><label>@Price(SelectedPack)</label></div><button class="cd-btn cd-primary @(CanPreviewBuy(SelectedPack)?"":"cd-disabled")" disabled="@(!CanPreviewBuy(SelectedPack))" onclick=@(()=>SetFeedback("purchase"))>@(CanPreviewBuy(SelectedPack)?T("Купить в инвентарь","Buy to inventory"):Missing(SelectedPack))<span>↗</span></button><button class="cd-btn cd-secondary" onclick=@CloseModal>@T("Пока не покупать","Keep browsing")</button></div>
        }
        else if(Modal=="player")
        {
            var card=Samples[Math.Clamp(SelectedPlayer,0,Samples.Length-1)];
            <div class="cd-modal-art cd-modal-player-art"><label class="cd-kicker">@T("ИГРОК ВАШЕГО КЛУБА","YOUR CLUB PLAYER")</label><label class="cd-modal-player-rating">@card.Overall</label><img src="@Portrait(card)" /><label>@($"{Role(card)} · {card.CountryCode}")</label></div><div class="cd-modal-copy"><label class="cd-kicker">@T("ДОСЬЕ ИГРОКА","PLAYER DOSSIER")</label><label class="cd-modal-title">@DisplayName(card)</label><label class="cd-modal-description">@T("Характеристики помогают найти роль в вашей команде.","Use the attributes to find their role in your team.")</label><div class="cd-player-stat-table"><div><label>@T("Скорость","Pace")</label><label>@card.Pace</label></div><div><label>@T("Удары","Shooting")</label><label>@card.Shooting</label></div><div><label>@T("Передачи","Passing")</label><label>@card.Passing</label></div><div><label>@T("Дриблинг","Dribbling")</label><label>@card.Dribbling</label></div><div><label>@T("Защита","Defence")</label><label>@card.Defence</label></div><div><label>@T("Физика","Physical")</label><label>@card.Physical</label></div></div><button class="cd-btn cd-primary" onclick=@(()=>SetFeedback("lineup"))>@T("К составу команды","View the squad")<span>↗</span></button><button class="cd-btn cd-secondary" onclick=@CloseModal>@T("Вернуться к коллекции","Back to the collection")</button></div>
        }
        else if(Modal=="cup")
        {
            <div class="cd-modal-art cd-invitation-art"><img src="/crests/barceluna.png" /><label class="cd-invitation-place">02</label><label>@T("МЕСТО / ОСТАЛСЯ 1 ТУР","PLACE / ONE ROUND LEFT")</label></div><div class="cd-modal-copy"><label class="cd-kicker">@T("ЦЕЛЬ КЛУБА","YOUR CLUB GOAL")</label><label class="cd-modal-title">@T("Финальный\nкубок ждёт.","The Final\nCup awaits.")</label><label class="cd-modal-description">@T("Первое или второе место в последней лиге открывает финальный кубок. Победа в нём завершит историю клуба.","First or second place in the last league unlocks the Final Cup. Win it to complete the club's story.")</label><div class="cd-invitation-route"><label>@T("ЧЕТВЕРТЬФИНАЛ","QUARTER-FINAL")</label><span>→</span><label>@T("ПОЛУФИНАЛ","SEMI-FINAL")</label><span>→</span><label>@T("ФИНАЛ","FINAL")</label></div><button class="cd-btn cd-primary" onclick=@(()=>SetFeedback("cup"))>@T("Подготовить состав","Prepare your eleven")<span>↗</span></button><button class="cd-btn cd-secondary" onclick=@CloseModal>@T("Остаться в клубе","Stay at the club")</button></div>
        }
        else
        {
            <div class="cd-modal-copy cd-simple-modal"><label class="cd-kicker">@T("МЕНЮ КЛУБА","CLUB MENU")</label><label class="cd-modal-title">@T(Modal=="inventory"?"Ваши паки.":"Настройки клуба.",Modal=="inventory"?"Your packs.":"Club settings.")</label><label class="cd-modal-description">@T("Здесь показаны оформление диалога, кнопки и обратная связь. Данные игры не меняются.","This preview shows the dialogue, buttons and feedback. Game data remains unchanged.")</label><button class="cd-btn cd-primary" onclick=@CloseModal>@T("Понятно","Got it")<span>✓</span></button></div>
        }
        </div></div>
    }
</root>

@code {
    public int Variant {get;set;}
    public string View {get;set;}="store";
    public bool Russian {get;set;}=true;
    public bool Stress {get;set;}
    public bool Motion {get;set;}=true;
    public int Revision {get;set;}
    public bool CupPacks {get;set;}
    public string CollectionFilter {get;set;}="all";
    public bool SortByName {get;set;}
    public bool DropdownOpen {get;set;}
    public string Modal {get;set;}="";
    public int SelectedPack {get;set;}=1;
    public int SelectedPlayer {get;set;}
    public string Feedback {get;set;}="";
    static readonly string[] Pages={"home","store","collection","states"};
    static readonly string[] Filters={"all","def","mid","att"};
    PlayerCard[] samples;
    PlayerCard[] Samples=>samples??=new[]{"GB-13","RU-00","RU-12","ES-14","FR-15","DE-16","BR-17","JP-19"}.Select(PlayerCatalog.Find).Where(c=>c!=null).ToArray();
    string T(string ru,string en)=>Russian?ru:en;
    string ClubName=>Stress?T("Барселуна Атлетический Футбольный Клуб","Barceluna Metropolitan Athletic Football Club"):"FC BARCELUNA";
    string Direction(int i)=>i==0?T("Клубная коллекция","Club collection"):i==1?T("Программа клуба","Club programme"):T("Альбом клуба","Club album");
    string PageName(string page)=>page switch{"home"=>T("Мой клуб","My club"),"store"=>T("Магазин","Shop"),"collection"=>T("Коллекция","Collection"),_=>T("Кнопки и диалоги","Buttons & dialogues")};
    string PageNumber(string page)=>$"0{Array.IndexOf(Pages,page)+1}";
    string FilterName(string role)=>role switch{"def"=>T("Защитники","Defenders"),"mid"=>T("Полузащитники","Midfielders"),"att"=>T("Нападающие","Forwards"),_=>T("Все игроки","All players")};
    string DisplayName(PlayerCard card)=>Stress?T(card.Name+"-Александрович",card.Name+"-Montgomery"):card.Name;
    string Role(PlayerCard card)=>Russian?card.Position:card.Position switch{"ВР"=>"GK","КЗ"=>"FB","ЦЗ"=>"CB","ЦП"=>"CM","КП"=>"WM",_=>"ST"};
    string Portrait(PlayerCard card)=>PlayerAppearance.Portrait(card);
    static string PackArt(int index)=>ScoutPacks.All[index].UsesCupTokens?$"/store-packs/{ScoutPacks.All[index].Name.ToLowerInvariant()}.svg":$"/textures/store/{ScoutPacks.All[index].Name.ToLowerInvariant()}-pack-v1.png";
    int[] CurrentOffers=>CupPacks?new[]{3,4,5}:new[]{0,1,2};
    string PackName(int index)
    {
        string name=index switch{0=>T("Серебряный пак","Silver pack"),1=>T("Золотой пак","Gold pack"),2=>T("Алмазный пак","Diamond pack"),3=>T("Кубковый / Третья лига","Cup / Third League"),4=>T("Кубковый / Вторая лига","Cup / Second League"),_=>T("Кубковый / Первая лига","Cup / First League")};
        return Stress?name+T(" — специальное пополнение клуба"," — special club collection edition"):name;
    }
    string PackDescription(int i)=>i switch{0=>T("Бронзовые игроки, шанс серебра и редкого золота.","Bronze players, with a chance of silver and rare gold."),1=>T("Серебряные и золотые игроки. Возможна элитная карточка.","Silver and gold players, with a chance of elite."),2=>T("Золотые и элитные игроки для сильнейшего состава.","Gold and elite players for your strongest eleven."),_=>T("Только золотые и элитные игроки. Пак за кубковую валюту.","Only gold and elite players. Purchased with cup tokens.")};
    string[] Odds(int i)
    {
        var o=ScoutPacks.All[i];var names=new[]{T("Бронза","Bronze"),T("Серебро","Silver"),T("Золото","Gold"),T("Элита","Elite"),T("Легенды","Legendary")};
        return Enumerable.Range(0,5).Where(n=>o.Weight(n)>0).Select(n=>$"{names[n]} {o.Weight(n)}%").ToArray();
    }
    string Price(int i)=>ScoutPacks.All[i].UsesCupTokens?T($"{ScoutPacks.All[i].Cost} кубков",$"{ScoutPacks.All[i].Cost} tokens"):$"{ScoutPacks.All[i].Cost:N0} ◈";
    bool CanPreviewBuy(int i)=>ScoutPacks.All[i].UnlockDivision<=5 && ScoutPacks.All[i].Cost<=(ScoutPacks.All[i].UsesCupTokens?12:2400);
    string Missing(int i)
    {
        var o=ScoutPacks.All[i];int missing=o.Cost-(o.UsesCupTokens?12:2400);
        return o.UsesCupTokens?T($"Не хватает {missing} кубков",$"Need {missing} more tokens"):T($"Не хватает {missing} ◈",$"Need {missing} more ◈");
    }
    PlayerCard[] VisibleCards=>SortByName?FilteredCards.OrderBy(c=>c.Name).ToArray():FilteredCards.OrderByDescending(c=>c.Overall).ToArray();
    PlayerCard[] FilteredCards=>Samples.Where(c=>CollectionFilter switch{"def"=>c.Position is "КЗ" or "ЦЗ","mid"=>c.Position is "ЦП" or "КП","att"=>c.Position=="НП",_=>true}).ToArray();
    void ChangeVariant(int variant){Variant=variant;Revision++;}
    void Navigate(string page){View=page;Modal="";DropdownOpen=false;Feedback="";Revision++;}
    void SetCurrency(bool cups){CupPacks=cups;Revision++;}
    void SetFilter(string filter){CollectionFilter=filter;Revision++;}
    void SetSort(bool names){SortByName=names;DropdownOpen=false;Revision++;}
    void OpenModal(string modal){Modal=modal;Feedback="";Revision++;}
    void OpenPack(int index){SelectedPack=index;OpenModal("pack");}
    void OpenPlayer(PlayerCard card){SelectedPlayer=Array.IndexOf(Samples,card);OpenModal("player");}
    void CloseModal(){Modal="";Revision++;}
    void SetFeedback(string kind){Modal="";Feedback=kind;Revision++;}
    protected override void OnTreeBuilt(){base.OnTreeBuilt();Panel.StyleSheet.Load("/ClubDirectionPreview.razor.scss");}
    protected override int BuildHash()=>HashCode.Combine(Variant,View,Russian,Stress,Motion,Revision,Modal,Feedback);
}