{% extends "base.html" %}

{% block title %}{{ t('discover.page_title') }}{% endblock %}

{% block head %}
<style>
    :root { --discover-ink:#18181b; --discover-muted:#71717a; --discover-line:#e4e4e7; --discover-soft:#f7f7f8; --discover-blue:#2563eb; }
    .discover-app { min-height:100vh; color:var(--discover-ink); background:radial-gradient(circle at 78% 0,#eef4ff 0,transparent 34%),linear-gradient(150deg,#fafafa,#fff 48%,#f8fafc); }
    .discover-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:16px 26px; border-bottom:1px solid var(--discover-line); background:rgba(255,255,255,.88); backdrop-filter:blur(18px); }
    .discover-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#fff; background:#18181b; }
    .discover-mark svg { width:20px; height:20px; }
    .discover-title { font-size:17px; font-weight:780; letter-spacing:-.03em; }
    .discover-subtitle { margin-top:2px; color:#52525b; font-size:12px; line-height:1.45; }
    .discover-refresh { margin-left:auto; }
    .discover-main { width:min(1180px,calc(100% - 34px)); margin:0 auto; padding:29px 0 60px; }
    .discover-hero { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:end; margin:3px 0 23px; }
    .discover-hero h1 { margin:0; max-width:720px; font-size:35px; line-height:1.04; letter-spacing:-.055em; }
    .discover-hero p { margin:10px 0 0; max-width:700px; color:#52525b; font-size:14px; line-height:1.6; }
    .discover-trust { display:flex; gap:8px; align-items:center; padding:10px 12px; border:1px solid #dbeafe; border-radius:12px; color:#1d4ed8; background:#eff6ff; font-size:11px; font-weight:700; white-space:nowrap; }
    .discover-trust svg { width:14px; }
    .discover-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:17px; }
    .discover-tabs { display:flex; gap:4px; padding:4px; border:1px solid var(--discover-line); border-radius:12px; background:#fff; }
    .discover-tab,.discover-chip,.discover-button { border:0; font:inherit; cursor:pointer; }
    .discover-tab { padding:8px 13px; border-radius:9px; color:#52525b; background:transparent; font-size:12px; font-weight:700; }
    .discover-tab.active { color:#fff; background:#18181b; }
    .discover-search { position:relative; flex:1; min-width:230px; }
    .discover-search svg { position:absolute; left:12px; top:11px; width:15px; color:#a1a1aa; }
    .discover-search input { width:100%; height:40px; box-sizing:border-box; padding:0 12px 0 36px; border:1px solid var(--discover-line); border-radius:12px; color:#18181b; background:#fff; font:inherit; font-size:13px; }
    .discover-filters { display:flex; gap:6px; }
    .discover-chip { padding:8px 12px; border:1px solid var(--discover-line); border-radius:99px; color:#3f3f46; background:#fff; font-size:11px; font-weight:700; }
    .discover-chip.active { color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff; }
    .discover-alert { margin-bottom:15px; padding:12px 14px; border-radius:11px; color:#991b1b; background:#fff1f2; font-size:13px; line-height:1.5; }
    .discover-alert.info { color:#1e40af; background:#eff6ff; }
    .discover-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .discover-card { display:flex; flex-direction:column; min-height:218px; padding:18px; border:1px solid var(--discover-line); border-radius:18px; background:rgba(255,255,255,.93); box-shadow:0 12px 35px rgba(24,24,27,.035); transition:.16s ease; }
    .discover-card:hover { transform:translateY(-2px); border-color:#d4d4d8; box-shadow:0 16px 40px rgba(24,24,27,.075); }
    .discover-card-head { display:flex; align-items:flex-start; gap:11px; }
    .discover-icon { width:39px; height:39px; display:grid; place-items:center; flex:none; border-radius:12px; color:#1d4ed8; background:#eff6ff; }
    .discover-icon.agent { color:#7e22ce; background:#faf5ff; }.discover-icon.service { color:#047857; background:#ecfdf5; }
    .discover-icon svg { width:18px; }
    .discover-card h2 { margin:1px 0 3px; font-size:16px; letter-spacing:-.02em; }
    .discover-id { color:#71717a; font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
    .discover-type { margin-left:auto; padding:4px 7px; border-radius:99px; color:#3f3f46; background:#f4f4f5; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
    .discover-description { margin:14px 0 17px; color:#52525b; font-size:13px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .discover-meta { display:flex; gap:10px; align-items:center; margin-top:auto; color:#71717a; font-size:11px; }
    .discover-meta span { display:inline-flex; align-items:center; gap:3px; }.discover-meta svg { width:11px; }
    .discover-compatibility { margin-top:12px; padding:9px 10px; border:1px solid #fde68a; border-radius:9px; color:#92400e; background:#fffbeb; font-size:10px; line-height:1.45; }
    .discover-card-actions { display:flex; gap:7px; margin-top:13px; }
    .discover-button { min-height:36px; padding:8px 12px; border:1px solid var(--discover-line); border-radius:10px; color:#3f3f46; background:#fff; font-size:11px; font-weight:750; }
    .discover-button:hover { background:#f4f4f5; }.discover-button.primary { color:#fff; border-color:#18181b; background:#18181b; }.discover-button.danger { color:#b91c1c; }.discover-button:disabled { opacity:.45; cursor:not-allowed; }
    .discover-empty { grid-column:1/-1; padding:70px 20px; border:1px dashed #d4d4d8; border-radius:18px; color:#52525b; text-align:center; font-size:13px; }
    .discover-empty svg { width:31px; margin:0 auto 10px; color:#a1a1aa; }
    .discover-loading { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.discover-skeleton { height:218px; border-radius:18px; background:linear-gradient(90deg,#f4f4f5,#fafafa,#f4f4f5); background-size:220% 100%; animation:discover-shimmer 1.5s infinite; }
    @keyframes discover-shimmer { to { background-position:-220% 0; } }
    .discover-modal-bg { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(24,24,27,.38); backdrop-filter:blur(4px); }
    .discover-modal { width:min(670px,100%); max-height:82vh; overflow:auto; border:1px solid var(--discover-line); border-radius:22px; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.24); }
    .discover-modal-head { display:flex; gap:13px; align-items:flex-start; padding:22px; border-bottom:1px solid var(--discover-line); }.discover-modal-body { padding:22px; }
    .discover-modal h2 { margin:1px 0 4px; font-size:21px; letter-spacing:-.04em; }.discover-close { margin-left:auto; padding:6px; border:0; border-radius:9px; background:#f4f4f5; cursor:pointer; }.discover-close svg { width:16px; }
    .discover-section { margin-top:20px; }.discover-section h3 { margin:0 0 9px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }.discover-permission { padding:11px 12px; margin-top:6px; border-radius:10px; color:#52525b; background:#f7f7f8; font-size:12px; line-height:1.5; }.discover-permission strong { display:block; margin-bottom:3px; color:#27272a; }
    .publish-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:3px 0 22px; padding:24px; border:1px solid #dbeafe; border-radius:20px; color:#172554; background:linear-gradient(125deg,#eff6ff,#fff 58%,#eef2ff); }
    .publish-hero h1 { margin:0; font-size:30px; letter-spacing:-.05em; }.publish-hero p { max-width:720px; margin:8px 0 0; color:#475569; font-size:13px; line-height:1.6; }
    .publish-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .publish-panel { border:1px solid var(--discover-line); border-radius:18px; background:rgba(255,255,255,.94); overflow:hidden; }
    .publish-panel.wide { grid-column:1/-1; }.publish-panel-head { display:flex; align-items:center; gap:11px; padding:17px 18px; border-bottom:1px solid var(--discover-line); }
    .publish-step { width:27px; height:27px; display:grid; place-items:center; flex:none; border-radius:9px; color:#fff; background:#18181b; font-size:10px; font-weight:800; }
    .publish-panel-head h2 { margin:0; font-size:15px; }.publish-panel-head p { margin:3px 0 0; color:#52525b; font-size:11px; line-height:1.45; }.publish-panel-body { padding:18px; }
    .publish-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.publish-field { display:block; }.publish-field.wide { grid-column:1/-1; }
    .publish-field span { display:block; margin:0 0 6px 2px; color:#3f3f46; font-size:11px; font-weight:750; }.publish-input { width:100%; height:40px; box-sizing:border-box; padding:0 11px; border:1px solid var(--discover-line); border-radius:10px; color:#18181b; background:#fff; font:inherit; font-size:12px; }
    .publish-input:focus { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.08); outline:0; }.publish-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:13px; }
    .publish-summary { margin-top:12px; padding:12px; border:1px solid #e0e7ff; border-radius:12px; background:#f8faff; }.publish-summary strong { display:block; font-size:13px; }.publish-summary small { display:block; margin-top:4px; color:#52525b; font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; }
    .publish-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:99px; color:#475569; background:#f1f5f9; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }.publish-pill.good { color:#166534; background:#ecfdf3; }.publish-pill.warn { color:#92400e; background:#fffbeb; }
    .submission-list { display:grid; gap:9px; }.submission-row { display:grid; grid-template-columns:minmax(170px,1.35fr) minmax(110px,.7fr) minmax(120px,.75fr) auto; gap:13px; align-items:center; padding:13px 14px; border:1px solid #ececf0; border-radius:13px; }
    .submission-name { min-width:0; }.submission-name strong { display:block; overflow:hidden; text-overflow:ellipsis; font-size:13px; white-space:nowrap; }.submission-name span,.submission-cell span { display:block; margin-top:3px; color:#71717a; font-size:10px; }.submission-cell { color:#3f3f46; font-size:11px; }.submission-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
    .submission-status { display:inline-flex; padding:5px 8px; border-radius:99px; color:#52525b; background:#f4f4f5; font-size:8px; font-weight:800; text-transform:uppercase; }.status-published,.status-approved { color:#166534; background:#ecfdf3; }.status-review-pending { color:#1d4ed8; background:#eff6ff; }.status-rejected { color:#991b1b; background:#fff1f2; }
    .publish-empty { padding:34px 18px; color:#52525b; text-align:center; font-size:12px; }.publish-help { margin-top:10px; color:#52525b; font-size:11px; line-height:1.55; }
    .publish-auth { padding:34px; border:1px dashed #bfdbfe; border-radius:18px; color:#475569; background:#f8fbff; text-align:center; }.publish-auth h2 { margin:0 0 7px; color:#172554; font-size:17px; }.publish-auth p { margin:0 auto; max-width:580px; font-size:12px; line-height:1.6; }.publish-auth .publish-actions { justify-content:center; }
    .review-note { min-width:210px; height:64px; padding:9px 11px; resize:vertical; line-height:1.4; }
    .submission-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }.submission-detail { padding:10px; border-radius:10px; background:#f7f7f8; }.submission-detail span { display:block; color:#71717a; font-size:10px; text-transform:uppercase; }.submission-detail strong { display:block; margin-top:4px; font-size:12px; word-break:break-all; }
    .install-modal { width:min(560px,calc(100vw - 32px)); }.install-summary { padding:20px; border:1px solid #e4e4e7; border-radius:15px; background:#fafafa; }.install-stage-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.install-stage-row h3 { margin:0; font-size:16px; }.install-stage-row p { margin:5px 0 0; color:#71717a; font-size:11px; word-break:break-all; }.install-step-count { flex:none; color:#52525b; font-size:12px; font-weight:800; }.install-progress { height:9px; margin-top:17px; overflow:hidden; border-radius:99px; background:#e4e4e7; }.install-progress > span { display:block; height:100%; border-radius:inherit; background:#18181b; transition:width .25s ease; }.install-transfer { display:flex; justify-content:space-between; margin-top:8px; color:#71717a; font-size:10px; font-variant-numeric:tabular-nums; }.install-steps { display:grid; gap:0; margin-top:18px; }.install-step { position:relative; display:grid; grid-template-columns:27px 1fr; gap:11px; min-height:42px; color:#a1a1aa; }.install-step:not(:last-child)::after { content:""; position:absolute; left:13px; top:27px; bottom:0; width:1px; background:#e4e4e7; }.install-step-dot { position:relative; z-index:1; display:grid; place-items:center; width:27px; height:27px; border:1px solid #d4d4d8; border-radius:50%; background:white; font-size:10px; font-weight:800; }.install-step strong { padding-top:6px; font-size:12px; }.install-step.done,.install-step.active { color:#18181b; }.install-step.done .install-step-dot { color:white; border-color:#18181b; background:#18181b; }.install-step.active .install-step-dot { border:2px solid #18181b; }.install-step.failed { color:#b91c1c; }.install-step.failed .install-step-dot { color:white; border-color:#b91c1c; background:#b91c1c; }.install-step.review { color:#92400e; }.install-step.review .install-step-dot { color:white; border-color:#d97706; background:#d97706; }.install-error { margin-top:14px; padding:12px 14px; border:1px solid #fecaca; border-radius:11px; color:#991b1b; background:#fff1f2; font-size:11px; line-height:1.5; }.install-error.review { color:#92400e; border-color:#fde68a; background:#fffbeb; }.install-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
    @media(max-width:900px){.discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.discover-hero{grid-template-columns:1fr}.discover-trust{width:max-content}}
    @media(max-width:900px){.publish-layout{grid-template-columns:1fr}.publish-panel.wide{grid-column:auto}.submission-row{grid-template-columns:1fr 1fr}.submission-actions{justify-content:flex-start}}
    @media(max-width:620px){.discover-header{padding:13px 16px}.discover-main{width:min(100% - 24px,1180px);padding-top:20px}.discover-hero h1{font-size:28px}.discover-grid{grid-template-columns:1fr}.discover-loading{grid-template-columns:1fr}.discover-filters{width:100%;overflow:auto}.discover-refresh{margin-left:auto}.publish-hero{display:block;padding:19px}.publish-hero h1{font-size:25px}.publish-fields,.submission-row,.submission-detail-grid{grid-template-columns:1fr}.publish-field.wide{grid-column:auto}}
</style>
{% endblock %}

{% block content %}
<div class="discover-app" x-data="discoverApp()" x-init="init()" data-app-id="ai2apps.discover">
    <header class="discover-header">
        <span class="discover-mark"><i data-lucide="compass"></i></span>
        <div><div class="discover-title">{{ t('discover.header.title') }}</div><div class="discover-subtitle">{{ t('discover.header.subtitle') }}</div></div>
        <button class="discover-button discover-refresh" :disabled="busy" @click="reload()"><i data-lucide="refresh-cw" class="w-3 h-3"></i> {{ t('discover.action.refresh') }}</button>
    </header>
    <main class="discover-main">
        <section x-show="tab!=='publish'" class="discover-hero">
            <div><h1>{{ t('discover.hero.title') }}</h1><p>{{ t('discover.hero.description') }}</p></div>
            <div class="discover-trust"><i data-lucide="shield-check"></i> {{ t('discover.hero.trust') }}</div>
        </section>
        <div class="discover-toolbar">
            <div class="discover-tabs"><button class="discover-tab" :class="tab==='discover'&&'active'" @click="setTab('discover')">{{ t('discover.tab.discover') }}</button><button class="discover-tab" :class="tab==='installed'&&'active'" @click="setTab('installed')">{{ t('discover.tab.installed') }} <span x-text="installed.length"></span></button><button class="discover-tab" :class="tab==='publish'&&'active'" @click="setTab('publish')">{{ t('discover.tab.publish') }}</button></div>
            <label x-show="tab!=='publish'" class="discover-search"><i data-lucide="search"></i><input x-model.debounce.350ms="query" @input="tab==='discover'&&search()" placeholder="{{ t('discover.search.placeholder') }}"></label>
            <div x-show="tab!=='publish'" class="discover-filters"><template x-for="item in filters" :key="item.value"><button class="discover-chip" :class="type===item.value&&'active'" @click="setType(item.value)" x-text="item.label"></button></template></div>
        </div>
        <div x-show="message" x-cloak class="discover-alert" :class="messageTone==='info'&&'info'" x-text="message"></div>
        <section x-show="tab!=='publish'" class="discover-grid">
            <div x-show="busy" class="discover-loading"><div class="discover-skeleton"></div><div class="discover-skeleton"></div><div class="discover-skeleton"></div></div>
            <template x-for="item in visibleItems" :key="item.packageId"><article class="discover-card">
                <div class="discover-card-head"><span class="discover-icon" :class="item.packageType"><i :data-lucide="iconFor(item.packageType)"></i></span><div><h2 x-text="item.displayName"></h2><div class="discover-id" x-text="item.packageId"></div></div><span class="discover-type" x-text="packageTypeLabel(item.packageType)"></span></div>
                <p class="discover-description" x-text="item.description || window.t('discover.common.no_description')"></p>
                <div class="discover-meta"><span x-show="isInstalled(item.packageId)"><i data-lucide="hard-drive"></i><span x-text="localVersionLabel(item)"></span></span><span x-show="cloudVersion(item)"><i data-lucide="cloud"></i><span x-text="cloudVersionLabel(item)"></span></span><span x-show="item.publisherName"><i data-lucide="badge-check"></i><span x-text="item.publisherName"></span></span><span x-show="item.ratingCount"><i data-lucide="star"></i><span x-text="ratingText(item)"></span></span></div>
                <div x-show="!canInstall(item)&&!isInstalled(item.packageId)" class="discover-compatibility" x-text="compatibilityMessage(item)"></div>
                <div class="discover-card-actions"><button class="discover-button" @click="openDetails(item)">{{ t('discover.action.details') }}</button><button x-show="tab==='discover'&&!isInstalled(item.packageId)" class="discover-button primary" :disabled="working===item.packageId||!canInstall(item)" @click="install(item)" x-text="working===item.packageId?window.t('discover.action.installing'):canInstall(item)?window.t('discover.action.install'):window.t('discover.action.incompatible')"></button><button x-show="isInstalled(item.packageId)&&item.packageType==='app'" class="discover-button primary" @click="open(item)">{{ t('discover.action.open') }}</button><button x-show="isInstalled(item.packageId)&&hasUpgrade(item)" class="discover-button primary" :disabled="working===item.packageId||!canInstall(item)" @click="install(item)" x-text="working===item.packageId?translate('discover.action.upgrading'):translate('discover.action.upgrade')"></button><button x-show="tab==='discover'&&pendingRestart(item)" class="discover-button primary" @click="restartLocal()" x-text="translate('discover.install.restart_local')"></button><button x-show="tab==='discover'&&isInstalled(item.packageId)&&!hasUpgrade(item)&&!pendingRestart(item)" class="discover-button" disabled>{{ t('discover.action.installed') }}</button><button x-show="tab==='installed'" class="discover-button danger" :disabled="working===item.packageId" @click="uninstall(item)" x-text="working===item.packageId?window.t('discover.action.removing'):window.t('discover.action.uninstall')"></button></div>
            </article></template>
            <div x-show="!busy&&!visibleItems.length" class="discover-empty"><i data-lucide="package-open"></i><div x-text="tab==='installed'?window.t('discover.empty.installed'):window.t('discover.empty.search')"></div></div>
        </section>
        <section x-show="tab==='publish'" x-cloak>
            <div class="publish-hero"><div><h1>{{ t('discover.publish.hero.title') }}</h1><p>{{ t('discover.publish.hero.description') }}</p><div x-show="publishingSignedIn" class="publish-actions"><span class="publish-pill good" x-text="publishingContext?.user?.displayName"></span><span class="publish-pill" x-text="publishingContext?.user?.systemRole"></span><span x-show="isPlatformAdmin" class="publish-pill" :class="adminStepUpActive?'good':'warn'" x-text="adminStepUpActive?window.t('discover.publish.admin.verified'):window.t('discover.publish.admin.verification_required')"></span></div></div><button class="discover-button" @click="openAccount()"><i data-lucide="circle-user-round" class="w-3 h-3"></i> {{ t('discover.publish.account_verification') }}</button></div>
            <div x-show="publishingLoaded&&!publishingSignedIn" class="publish-auth"><h2>{{ t('discover.publish.auth.title') }}</h2><p>{{ t('discover.publish.auth.description') }}</p><div class="publish-actions"><button class="discover-button primary" @click="openAccount()">{{ t('discover.publish.auth.action') }}</button><button class="discover-button" @click="reload()">{{ t('discover.action.refresh') }}</button></div></div>
            <div class="publish-layout" x-show="publishingSignedIn">
                <section class="publish-panel">
                    <header class="publish-panel-head"><span class="publish-step">1</span><div><h2>{{ t('discover.publish.publisher.title') }}</h2><p>{{ t('discover.publish.publisher.description') }}</p></div></header>
                    <div class="publish-panel-body">
                        <label class="publish-field"><span>{{ t('discover.publish.publisher.active') }}</span><select class="publish-input" x-model="selectedPublisherId"><option value="">{{ t('discover.publish.publisher.select') }}</option><template x-for="item in publishers" :key="item.id"><option :value="item.id" x-text="item.displayName+' · '+((item.namespaces||[]).map(value=>value.namespace).join(', ')||window.t('discover.publish.publisher.no_namespace'))"></option></template></select></label>
                        <div x-show="selectedPublisher" class="publish-summary"><strong x-text="selectedPublisher?.displayName"></strong><small x-text="(selectedPublisher?.namespaces||[]).map(item=>item.namespace).join(', ')"></small><div class="publish-actions"><span class="publish-pill good" x-text="selectedPublisher?.status||window.t('discover.status.active')"></span><span class="publish-pill" x-text="window.t('discover.publish.publisher.cloud_keys').replace('{count}',(selectedPublisher?.keys||[]).length)"></span></div></div>
                        <div class="publish-fields" style="margin-top:14px"><label class="publish-field"><span>{{ t('discover.publish.publisher.display_name') }}</span><input class="publish-input" maxlength="160" placeholder="{{ t('discover.publish.publisher.name_placeholder') }}" x-model.trim="publisherForm.displayName"></label><label class="publish-field"><span>{{ t('discover.publish.publisher.namespace') }}</span><input class="publish-input" minlength="3" maxlength="80" placeholder="my-team" x-model.trim="publisherForm.namespace"></label></div>
                        <div class="publish-actions"><button class="discover-button" :disabled="working||!publisherForm.displayName||publisherForm.namespace.length<3" @click="createPublisher()" x-text="working==='publisher'?window.t('discover.action.creating'):window.t('discover.publish.publisher.create')"></button></div>
                    </div>
                </section>
                <section class="publish-panel">
                    <header class="publish-panel-head"><span class="publish-step">2</span><div><h2>{{ t('discover.publish.key.title') }}</h2><p>{{ t('discover.publish.key.description') }}</p></div></header>
                    <div class="publish-panel-body">
                        <label class="publish-field"><span>{{ t('discover.publish.key.local') }}</span><select class="publish-input" x-model="selectedKeyRef"><option value="">{{ t('discover.publish.key.select') }}</option><template x-for="item in localKeys" :key="item.keyRef"><option :value="item.keyRef" x-text="item.name+' · '+shortFingerprint(item.fingerprintSha256)"></option></template></select></label>
                        <div x-show="selectedLocalKey" class="publish-summary"><strong x-text="selectedLocalKey?.name"></strong><small x-text="selectedLocalKey?.fingerprintSha256"></small><div class="publish-actions"><span class="publish-pill good" x-show="selectedCloudKey">{{ t('discover.publish.key.registered') }}</span><span class="publish-pill warn" x-show="!selectedCloudKey">{{ t('discover.publish.key.registration_required') }}</span></div></div>
                        <div class="publish-actions"><button x-show="selectedPublisher&&selectedLocalKey&&!selectedCloudKey" class="discover-button primary" :disabled="Boolean(working)" @click="registerSelectedKey()" x-text="working==='register-key'?window.t('discover.action.verifying'):window.t('discover.publish.key.register')"></button></div>
                        <div class="publish-fields" style="margin-top:14px"><label class="publish-field wide"><span>{{ t('discover.publish.key.new_name') }}</span><input class="publish-input" maxlength="120" placeholder="{{ t('discover.publish.key.name_placeholder') }}" x-model.trim="keyName"></label></div>
                        <div class="publish-actions"><button class="discover-button" :disabled="working||!keyName" @click="createKey()" x-text="working==='key'?window.t('discover.action.generating'):window.t('discover.publish.key.generate')"></button></div>
                    </div>
                </section>
                <section class="publish-panel">
                    <header class="publish-panel-head"><span class="publish-step">3</span><div><h2>{{ t('discover.publish.build.title') }}</h2><p>{{ t('discover.publish.build.description') }}</p></div></header>
                    <div class="publish-panel-body"><div class="publish-fields"><label class="publish-field wide"><span>{{ t('discover.publish.build.source') }}</span><input class="publish-input" placeholder="/absolute/path/to/package-source" x-model.trim="buildForm.sourcePath"></label><label class="publish-field wide"><span>{{ t('discover.publish.build.output') }}</span><input class="publish-input" placeholder="/private/tmp/package.ai2app" x-model.trim="buildForm.outputPath"></label></div><div class="publish-actions"><button class="discover-button primary" :disabled="working||!buildForm.sourcePath||!buildForm.outputPath" @click="buildPackage()" x-text="working==='build'?window.t('discover.action.building'):window.t('discover.publish.build.action')"></button></div><div x-show="buildResult" class="publish-summary"><strong x-text="buildResult?.package?.id+' · '+buildResult?.package?.version"></strong><small x-text="buildResult?.sha256"></small><div class="publish-actions"><span class="publish-pill good">{{ t('discover.publish.build.valid') }}</span><span class="publish-pill" x-text="formatBytes(buildResult?.size)"></span></div></div></div>
                </section>
                <section class="publish-panel">
                    <header class="publish-panel-head"><span class="publish-step">4</span><div><h2>{{ t('discover.publish.submit.title') }}</h2><p>{{ t('discover.publish.submit.description') }}</p></div></header>
                    <div class="publish-panel-body"><div class="publish-summary"><strong x-text="buildResult?.package?.id||window.t('discover.publish.submit.no_package')"></strong><small x-text="selectedPublisher?(selectedPublisher.displayName+' · '+(selectedLocalKey?.name||window.t('discover.publish.submit.select_key'))):window.t('discover.publish.submit.select_publisher_key')"></small><div class="publish-actions"><span class="publish-pill" :class="buildResult&&selectedCloudKey?'good':'warn'" x-text="buildResult&&selectedCloudKey?window.t('discover.publish.submit.ready'):window.t('discover.publish.submit.incomplete')"></span></div></div><div class="publish-actions"><button class="discover-button primary" :disabled="working||!buildResult||!selectedCloudKey" @click="submitPackage()" x-text="working==='submit'?window.t('discover.action.signing_uploading'):window.t('discover.publish.submit.action')"></button></div><p class="publish-help">{{ t('discover.publish.submit.help') }}</p></div>
                </section>
                <section class="publish-panel wide">
                    <header class="publish-panel-head"><span class="publish-step">5</span><div><h2>{{ t('discover.publish.workflow.title') }}</h2><p>{{ t('discover.publish.workflow.description') }}</p></div><button class="discover-button ml-auto" :disabled="busy" @click="reload()">{{ t('discover.action.refresh') }}</button></header>
                    <div class="publish-panel-body"><div class="submission-list"><template x-for="item in submissions" :key="item.id"><div class="submission-row"><div class="submission-name"><strong x-text="item.packageId+' · '+item.packageVersion"></strong><span x-text="shortFingerprint(item.artifactSha256)"></span></div><div class="submission-cell"><span class="submission-status" :class="statusClass(item)" x-text="statusLabel(item)"></span><span x-text="formatTime(item.createdAt)"></span></div><div class="submission-cell"><strong x-text="formatBytes(item.artifactSize)"></strong><span x-text="item.latestReview?.note||window.t('discover.publish.workflow.no_review')"></span></div><div class="submission-actions"><button class="discover-button" :disabled="Boolean(working)" @click="showSubmission(item)">{{ t('discover.action.details') }}</button><button x-show="item.releaseStatus==='candidate'" class="discover-button primary" :disabled="Boolean(working)" @click="requestReview(item)">{{ t('discover.publish.workflow.send_review') }}</button><button x-show="item.releaseStatus==='approved'" class="discover-button primary" :disabled="Boolean(working)" @click="publishSubmission(item)">{{ t('discover.tab.publish') }}</button></div></div></template><div x-show="!submissions.length" class="publish-empty">{{ t('discover.publish.workflow.empty') }}</div></div></div>
                </section>
                <section class="publish-panel wide" x-show="canReviewPackages" x-cloak>
                    <header class="publish-panel-head"><span class="publish-step"><i data-lucide="shield-check"></i></span><div><h2>{{ t('discover.publish.review.title') }}</h2><p>{{ t('discover.publish.review.description') }}</p></div></header>
                    <div class="publish-panel-body">
                        <div x-show="isPlatformAdmin&&!adminStepUpActive" class="publish-summary"><strong>{{ t('discover.publish.admin.title') }}</strong><small>{{ t('discover.publish.admin.description') }}</small><div class="publish-fields" style="margin-top:12px"><label class="publish-field wide"><span>{{ t('discover.publish.admin.password') }}</span><input class="publish-input" type="password" minlength="12" maxlength="128" autocomplete="current-password" x-model="adminPassword"></label></div><div class="publish-actions"><button class="discover-button primary" :disabled="working||adminPassword.length<12" @click="verifyAdministrator()" x-text="working==='admin-reauth'?window.t('discover.action.verifying'):window.t('discover.publish.admin.verify')"></button><button class="discover-button" @click="openAccount()">{{ t('discover.publish.account_verification') }}</button></div></div>
                        <div class="submission-list"><template x-for="item in reviewSubmissions" :key="'review-'+item.id"><div class="submission-row"><div class="submission-name"><strong x-text="item.packageId+' · '+item.packageVersion"></strong><span x-text="shortFingerprint(item.artifactSha256)"></span></div><div class="submission-cell"><span class="submission-status" :class="statusClass(item)" x-text="statusLabel(item)"></span><span x-text="formatTime(item.createdAt)"></span></div><div class="submission-cell"><textarea class="publish-input review-note" maxlength="2000" :placeholder="window.t('discover.publish.review.note_placeholder')" x-model.trim="reviewNotes[item.id]"></textarea></div><div class="submission-actions"><button class="discover-button" :disabled="Boolean(working)" @click="showSubmission(item)">{{ t('discover.action.details') }}</button><button class="discover-button danger" :disabled="Boolean(working)||!String(reviewNotes[item.id]||'').trim()" @click="rejectSubmission(item)">{{ t('discover.publish.workflow.reject') }}</button><button class="discover-button primary" :disabled="Boolean(working)||!String(reviewNotes[item.id]||'').trim()||(isPlatformAdmin&&!adminStepUpActive)" @click="approveSubmission(item)">{{ t('discover.publish.workflow.approve') }}</button></div></div></template><div x-show="!reviewSubmissions.length" class="publish-empty">{{ t('discover.publish.review.empty') }}</div></div>
                    </div>
                </section>
            </div>
        </section>
    </main>
    <div x-show="installDialog" x-cloak class="discover-modal-bg" @keydown.escape.window="closeInstallDialog()"><section class="discover-modal install-modal">
        <header class="discover-modal-head"><span class="discover-icon" :class="installDialog?.item?.packageType"><i :data-lucide="installDialog?.status==='completed'?'circle-check-big':installDialog?.status==='failed'||installDialog?.status==='dependency_required'?'circle-alert':installDialog?.status==='awaiting_review'?'shield-alert':'package-down'"></i></span><div><h2 x-text="installDialog?.status==='completed'?window.t('discover.install.completed_title'):installDialog?.status==='dependency_required'?translate('discover.install.dependency_required'):installDialog?.status==='failed'?window.t('discover.install.failed_title'):installDialog?.status==='awaiting_review'?window.t('discover.install.review_title'):window.t('discover.install.title')"></h2><div class="discover-id" x-text="installDialog?.item?.displayName+' · '+installDialog?.packageId"></div></div><button class="discover-close" :disabled="installDialog?.status==='pending'||installDialog?.status==='running'" @click="closeInstallDialog()"><i data-lucide="x"></i></button></header>
        <div class="discover-modal-body">
            <div class="install-summary">
                <div class="install-stage-row"><div><h3 x-text="installStageLabel(installDialog)"></h3><p x-show="installDialog?.stage==='downloading_package'||installDialog?.stage==='verifying_package'||installDialog?.stage==='downloading_dependency'||installDialog?.stage==='verifying_dependency'||installDialog?.stage==='installing_dependency'" x-text="installDialog?.packageId"></p></div><span class="install-step-count" x-text="window.t('discover.install.step_count').replace('{current}',installDialog?.currentStep||1).replace('{total}',installDialog?.totalSteps||6)"></span></div>
                <div class="install-progress"><span :style="'width:'+installPercent.toFixed(1)+'%'"></span></div>
                <div class="install-transfer"><span x-text="Math.round(installPercent)+'%'"></span><span x-show="Number(installDialog?.bytesTotal||0)>0" x-text="formatBytes(installDialog?.bytesCompleted)+' / '+formatBytes(installDialog?.bytesTotal)"></span></div>
            </div>
            <div class="install-steps"><template x-for="step in [1,2,3,4,5,6]" :key="step"><div class="install-step" :class="{'done':installDialog?.status==='completed'||step<Number(installDialog?.currentStep||1),'active':step===Number(installDialog?.currentStep||1)&&(installDialog?.status==='pending'||installDialog?.status==='running'),'failed':step===Number(installDialog?.currentStep||1)&&installDialog?.status==='failed','review':step===Number(installDialog?.currentStep||1)&&installDialog?.status==='awaiting_review'}"><span class="install-step-dot" x-text="(installDialog?.status==='completed'||step<Number(installDialog?.currentStep||1))?'✓':step"></span><strong x-text="installStepLabel(step)"></strong></div></template></div>
            <div x-show="installDialog?.status==='failed'" class="install-error" x-text="installDialog?.error?.message||window.t('discover.install.failed')"></div>
            <div x-show="installDialog?.status==='dependency_required'" class="install-error review"><strong x-text="requiredDependency()?.displayName||requiredDependency()?.packageId"></strong><div x-text="installDialog?.error?.message"></div><div x-show="requiredDependency()?.requiredVersion" class="discover-id" x-text="'Required '+requiredDependency()?.requiredVersion+(requiredDependency()?.activeVersion?' · Active '+requiredDependency()?.activeVersion:'')"></div></div>
            <div x-show="installDialog?.status==='awaiting_review'" class="install-error review">{{ t('discover.install.review_description') }}</div>
            <div class="install-actions"><button x-show="installDialog?.status==='failed'||installDialog?.status==='awaiting_review'||installDialog?.status==='dependency_required'||(installDialog?.status==='completed'&&installDialog?.result?.restartRequired)" class="discover-button" @click="closeInstallDialog()" x-text="installDialog?.status==='completed'&&installDialog?.result?.restartRequired?translate('discover.install.restart_later'):window.t('discover.install.close')"></button><button x-show="installDialog?.status==='failed'||installDialog?.status==='awaiting_review'" class="discover-button primary" @click="retryInstallDialog()" x-text="installDialog?.status==='awaiting_review'?window.t('discover.install.review_continue'):window.t('discover.install.retry')"></button><button x-show="installDialog?.status==='dependency_required'" class="discover-button primary" @click="installRequiredDependency()" x-text="requiredDependencyActionLabel()"></button><button x-show="installDialog?.status==='completed'&&!installDialog?.result?.restartRequired" class="discover-button primary" @click="finishInstallDialog()" x-text="installDialog?.result?.modelConfigurationId?window.t('discover.install.open_models'):window.t('discover.install.done')"></button><button x-show="installDialog?.status==='completed'&&installDialog?.result?.restartRequired" class="discover-button primary" @click="restartLocal()" x-text="translate('discover.install.restart_local')"></button></div>
        </div>
    </section></div>
    <div x-show="selected" x-cloak class="discover-modal-bg" @click.self="selected=null" @keydown.escape.window="selected=null"><section class="discover-modal">
        <header class="discover-modal-head"><span class="discover-icon" :class="selected?.packageType"><i :data-lucide="iconFor(selected?.packageType)"></i></span><div><h2 x-text="selected?.displayName"></h2><div class="discover-id" x-text="selected?.packageId"></div></div><button class="discover-close" @click="selected=null"><i data-lucide="x"></i></button></header>
        <div class="discover-modal-body"><p class="discover-description" style="display:block" x-text="selected?.description || window.t('discover.common.no_description')"></p><div class="discover-meta"><span x-show="isInstalled(selected?.packageId)" x-text="localVersionLabel(selected)"></span><span x-text="cloudVersionLabel(selected)"></span><span x-text="selected?.publisherName||''"></span></div><div x-show="!canInstall(selected)&&!isInstalled(selected?.packageId)" class="discover-compatibility" x-text="compatibilityMessage(selected)"></div><div class="discover-section"><h3>{{ t('discover.details.permissions') }}</h3><template x-for="permission in (selected?.permissions||[])" :key="permission.capability"><div class="discover-permission"><strong x-text="permission.capability+(permission.required?window.t('discover.details.required'):window.t('discover.details.optional'))"></strong><span x-text="permission.reason"></span></div></template><div x-show="!(selected?.permissions||[]).length" class="discover-permission">{{ t('discover.details.no_permissions') }}</div></div><div class="discover-card-actions"><button x-show="!isInstalled(selected?.packageId)" class="discover-button primary" :disabled="working===selected?.packageId||!canInstall(selected)" @click="install(selected)" x-text="canInstall(selected)?window.t('discover.action.verify_install'):window.t('discover.action.incompatible')"></button><button x-show="isInstalled(selected?.packageId)&&hasUpgrade(selected)" class="discover-button primary" :disabled="working===selected?.packageId||!canInstall(selected)" @click="install(selected)" x-text="working===selected?.packageId?translate('discover.action.upgrading'):translate('discover.action.verify_upgrade')"></button><button x-show="isInstalled(selected?.packageId)&&selected?.packageType==='app'" class="discover-button primary" @click="open(selected)">{{ t('discover.action.open') }}</button><button x-show="isInstalled(selected?.packageId)" class="discover-button danger" :disabled="working===selected?.packageId" @click="uninstall(selected)">{{ t('discover.action.uninstall') }}</button></div></div>
    </section></div>
    <div x-show="submissionDetails" x-cloak class="discover-modal-bg" @click.self="submissionDetails=null" @keydown.escape.window="submissionDetails=null"><section class="discover-modal"><header class="discover-modal-head"><span class="discover-icon"><i data-lucide="package-check"></i></span><div><h2 x-text="submissionDetails?.packageId"></h2><div class="discover-id" x-text="submissionDetails?.id"></div></div><button class="discover-close" @click="submissionDetails=null"><i data-lucide="x"></i></button></header><div class="discover-modal-body"><span class="submission-status" :class="statusClass(submissionDetails||{})" x-text="statusLabel(submissionDetails||{})"></span><div class="submission-detail-grid"><div class="submission-detail"><span>{{ t('discover.submission.version') }}</span><strong x-text="submissionDetails?.packageVersion"></strong></div><div class="submission-detail"><span>{{ t('discover.submission.artifact_size') }}</span><strong x-text="formatBytes(submissionDetails?.artifactSize)"></strong></div><div class="submission-detail"><span>{{ t('discover.submission.artifact_sha') }}</span><strong x-text="submissionDetails?.artifactSha256"></strong></div><div class="submission-detail"><span>{{ t('discover.submission.publisher_key') }}</span><strong x-text="submissionDetails?.publisherKeyId"></strong></div></div><div class="discover-section"><h3>{{ t('discover.submission.manifest') }}</h3><div class="discover-permission"><strong x-text="submissionDetails?.manifest?.package?.displayName"></strong><span x-text="submissionDetails?.manifest?.package?.description||window.t('discover.common.no_description')"></span></div></div></div></section></div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ static('js/discover.js') }}"></script>
{% endblock %}