{# Shared auth modal — drop {% include '_auth_modal.html' %} just before
   </body> in any landing template so the page's Sign In / Client Portal /
   Get Started buttons can call openAuth(...) and get a working modal.

   Self-contained: brings the modal markup, the window.TENANT injection
   so JS can resolve slot → tenant role, and the index.js include.
   Account-type buttons use SLOT names (primary/talent/fan/money/vendor) —
   selectAccountType in index.js resolves to the tenant's actual role at
   submit time, so every tenant signs up with the right plan string.

   Requires: request.state.tenant resolved (TenantMiddleware does this on
   every request). CSS comes from /static/css/main.css. #}

<div class="modal-overlay {% if TENANT.slug == 'celerfidus' %}cf-auth-overlay{% endif %}" id="authOverlay" onclick="closeAuthOnOverlay(event)">
    <div class="auth-modal {% if TENANT.slug == 'celerfidus' %}cf-auth-modal{% endif %}">

        <!-- LEFT -->
        <div class="auth-left">
            <div class="auth-left-logo">{{ TENANT.brand|upper }}</div>
            <div class="auth-left-headline" id="authLeftHeadline">
                {% if TENANT.slug == 'celerfidus' %}
                Sovereign Control. Ephemeral Clean Room.
                {% else %}
                Welcome to {{ TENANT.brand }}.
                {% endif %}
            </div>

            {% if TENANT.slug == 'celerfidus' %}
            <div class="auth-feature" id="authFeat0">
                <div class="auth-feature-icon" id="authFeatIcon0">🛡️</div>
                <div>
                    <div class="auth-feature-title" id="authFeatTitle0">Securum Clean Room</div>
                    <div class="auth-feature-desc" id="authFeatDesc0">Ephemeral, transient workspace environment with automatic session data purging.</div>
                </div>
            </div>
            <div class="auth-feature" id="authFeat1">
                <div class="auth-feature-icon" id="authFeatIcon1">🔒</div>
                <div>
                    <div class="auth-feature-title" id="authFeatTitle1">AISA Hardened Agents</div>
                    <div class="auth-feature-desc" id="authFeatDesc1">Operate with active adversarial self-defense, intent drift monitors, and private parameters.</div>
                </div>
            </div>
            <div class="auth-feature" id="authFeat2">
                <div class="auth-feature-icon" id="authFeatIcon2">📡</div>
                <div>
                    <div class="auth-feature-title" id="authFeatTitle2">Environment-Mediated Sniffer</div>
                    <div class="auth-feature-desc" id="authFeatDesc2">Low-overhead directory-aware navigation triggers that fetch spatial memories on demand.</div>
                </div>
            </div>
            <div class="auth-feature" id="authFeat3">
                <div class="auth-feature-icon" id="authFeatIcon3">🔑</div>
                <div>
                    <div class="auth-feature-title" id="authFeatTitle3">Sovereign Control</div>
                    <div class="auth-feature-desc" id="authFeatDesc3">Absolute ownership of your digital lifecycle endpoints and deal-room assets.</div>
                </div>
            </div>
            {% else %}
            <div class="auth-feature" id="authFeat0">
                <div class="auth-feature-icon" id="authFeatIcon0">🤝</div>
                <div>
                    <div class="auth-feature-title" id="authFeatTitle0">Find Collaborators</div>
                    <div class="auth-feature-desc" id="authFeatDesc0">Connect with the {{ TENANT.roles.primary }}s, {{ TENANT.roles.talent }}s, and {{ TENANT.roles.money }}s building in this industry.</div>
                </div>
            </div>
            <div class="auth-feature" id="authFeat1">
                <div class="auth-feature-icon" id="authFeatIcon1">🎯</div>
                <div>
                    <div class="auth-feature-title" id="authFeatTitle1">Pitch · Negotiate · Close</div>
                    <div class="auth-feature-desc" id="authFeatDesc1">Get your work in front of the right people. Pitch, negotiate, and sign — from the platform.</div>
                </div>
            </div>
            <div class="auth-feature" id="authFeat2">
                <div class="auth-feature-icon" id="authFeatIcon2">📈</div>
                <div>
                    <div class="auth-feature-title" id="authFeatTitle2">Manage Every Deal</div>
                    <div class="auth-feature-desc" id="authFeatDesc2">Track your projects, payments, and partners. Every deal in one place.</div>
                </div>
            </div>
            <div class="auth-feature" id="authFeat3">
                <div class="auth-feature-icon" id="authFeatIcon3">🛠️</div>
                <div>
                    <div class="auth-feature-title" id="authFeatTitle3">AI That Works With You</div>
                    <div class="auth-feature-desc" id="authFeatDesc3">An AI entity that knows your craft, your projects, and your people — always on call.</div>
                </div>
            </div>
            {% endif %}

            <div class="auth-left-foot">Powered by Developum AI Engine</div>
        </div>

        <!-- RIGHT -->
        <div class="auth-right">
            {% if auth_error %}
            <div class="auth-error">{{ auth_error }}</div>
            {% endif %}

            <div class="auth-tabs">
                <button class="auth-tab active" id="tabSignin" onclick="switchTab('signin')">Sign In</button>
                <button class="auth-tab" id="tabSignup" onclick="switchTab('signup')">Create Account</button>
            </div>

            <!-- SIGN IN -->
            <form class="auth-panel active" id="panelSignin" method="POST" action="/auth/signin">
                <div>
                    <label>Email</label>
                    <input type="email" name="email" placeholder="you@example.com" required autocomplete="email">
                </div>
                <div>
                    <label>Password</label>
                    <input type="password" name="password" placeholder="Enter your password" required autocomplete="current-password">
                </div>
                <button type="submit" class="btn btn-primary w-full" style="margin-top:4px;">Sign In</button>
                <div class="auth-divider">or</div>
                <button type="button" class="btn btn-ghost w-full" onclick="switchTab('signup')">Create an account</button>
            </form>

            <!-- SIGN UP — slot-named buttons, tenant resolves at submit time -->
            <form class="auth-panel" id="panelSignup" method="POST" action="/auth/signup">
                <div style="margin-bottom:14px;">
                    <div style="font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-mute);margin-bottom:8px;">I am a…</div>
                    {% if TENANT.slug == 'celerfidus' %}
                    <div style="display:flex; flex-direction:column; gap:8px;">
                        <div class="su-type" data-type="primary" onclick="selectAccountType('primary')" style="padding:10px 14px;border:1px solid var(--gold);background:rgba(197,86,42,0.07);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;border-radius:4px;">
                            <div style="font-size:18px;line-height:1;">🛣️</div>
                            <div style="flex-grow:1;">
                                <div style="font-size:12px;font-weight:700;color:var(--text);">The Start</div>
                                <div style="font-size:9.5px;color:var(--text-mute);margin-top:1px;">Identity, leases, utility setups</div>
                            </div>
                        </div>
                        <div class="su-type" data-type="talent" onclick="selectAccountType('talent')" style="padding:10px 14px;border:1px solid var(--border-hi);background:transparent;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;border-radius:4px;">
                            <div style="font-size:18px;line-height:1;">📐</div>
                            <div style="flex-grow:1;">
                                <div style="font-size:12px;font-weight:700;color:var(--text);">The Build</div>
                                <div style="font-size:9.5px;color:var(--text-mute);margin-top:1px;">Entities, operations, strategy blueprints</div>
                            </div>
                        </div>
                        <div class="su-type" data-type="money" onclick="selectAccountType('money')" style="padding:10px 14px;border:1px solid var(--border-hi);background:transparent;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;border-radius:4px;">
                            <div style="font-size:18px;line-height:1;">🌲</div>
                            <div style="flex-grow:1;">
                                <div style="font-size:12px;font-weight:700;color:var(--text);">The Legacy</div>
                                <div style="font-size:9.5px;color:var(--text-mute);margin-top:1px;">Estates, digital assets, continuity</div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px;">
                        <div class="su-type" data-type="primary" onclick="selectAccountType('primary')" style="padding:10px 8px;border:1px solid var(--gold);background:rgba(197,86,42,0.07);cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:all .15s;">
                            <div style="font-size:13px;margin-bottom:2px;">🎬</div>
                            <div style="font-size:11px;font-weight:700;color:var(--text);">{{ TENANT.roles.primary|title }}</div>
                            <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:2px;">Build · Pitch · Fund</div>
                        </div>
                        <div class="su-type" data-type="talent" onclick="selectAccountType('talent')" style="padding:10px 8px;border:1px solid var(--border-hi);background:transparent;cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:all .15s;">
                            <div style="font-size:13px;margin-bottom:2px;">🎭</div>
                            <div style="font-size:11px;font-weight:700;color:var(--text);">{{ TENANT.roles.talent|title }}</div>
                            <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:2px;">Perform · Book · Get Paid</div>
                        </div>
                        <div class="su-type" data-type="fan" onclick="selectAccountType('fan')" style="padding:10px 8px;border:1px solid var(--border-hi);background:transparent;cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:all .15s;">
                            <div style="font-size:13px;margin-bottom:2px;">🤝</div>
                            <div style="font-size:11px;font-weight:700;color:var(--text);">{{ TENANT.roles.fan|title }}</div>
                            <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:2px;">Back a project · Free to join</div>
                        </div>
                        <div class="su-type" data-type="money" onclick="selectAccountType('money')" style="padding:10px 8px;border:1px solid var(--border-hi);background:transparent;cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:all .15s;">
                            <div style="font-size:13px;margin-bottom:2px;">💼</div>
                            <div style="font-size:11px;font-weight:700;color:var(--text);">{{ TENANT.roles.money|title }}</div>
                            <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:2px;">Pledge · Deal room · Free to join</div>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <div>
                    <label>Your Name</label>
                    <input type="text" name="name" placeholder="e.g. Jordan Lee" required autocomplete="name">
                </div>
                <div>
                    <label>Email</label>
                    <input type="email" name="email" placeholder="you@example.com" required autocomplete="email">
                </div>
                <div>
                    <label>Password</label>
                    <input type="password" name="password" placeholder="At least 8 characters" required minlength="8" autocomplete="new-password">
                </div>

                <!-- Plan picker — shown when primary creator is selected -->
                <div id="planPickerWrap" style="margin:14px 0 4px;">
                    <div style="font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-mute);margin-bottom:8px;">Choose a plan</div>
                    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px;">
                        <div class="su-plan selected" data-plan="solo" onclick="selectSignupPlan(this,'solo')" style="padding:10px 8px;border:1px solid var(--gold);background:rgba(197,86,42,0.07);cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:all .15s;">
                            <div style="font-size:11px;font-weight:700;color:var(--text);letter-spacing:-.1px;">Solo</div>
                            <div style="font-family:var(--mono);font-size:9px;color:var(--gold);margin-top:2px;">$10/mo</div>
                            <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:3px;">3-day trial</div>
                        </div>
                        <div class="su-plan" data-plan="pro" onclick="selectSignupPlan(this,'pro')" style="padding:10px 8px;border:1px solid var(--border-hi);background:transparent;cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:all .15s;">
                            <div style="font-size:11px;font-weight:700;color:var(--text);letter-spacing:-.1px;">Pro</div>
                            <div style="font-family:var(--mono);font-size:9px;color:var(--text-mute);margin-top:2px;">$25/mo</div>
                            <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:3px;">Most popular</div>
                        </div>
                        <div class="su-plan" data-plan="studio_pro" onclick="selectSignupPlan(this,'studio_pro')" style="padding:10px 8px;border:1px solid var(--border-hi);background:transparent;cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:all .15s;">
                            <div style="font-size:11px;font-weight:700;color:var(--text);letter-spacing:-.1px;">Production</div>
                            <div style="font-family:var(--mono);font-size:9px;color:var(--text-mute);margin-top:2px;">$75/mo</div>
                            <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:3px;">Unlimited projects</div>
                        </div>
                        <div class="su-plan" data-plan="studio" onclick="selectSignupPlan(this,'studio')" style="padding:10px 8px;border:1px solid var(--border-hi);background:transparent;cursor:pointer;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);transition:all .15s;">
                            <div style="font-size:11px;font-weight:700;color:var(--text);letter-spacing:-.1px;">Studio</div>
                            <div style="font-family:var(--mono);font-size:9px;color:var(--text-mute);margin-top:2px;">$150/mo</div>
                            <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:3px;">Unlimited seats</div>
                        </div>
                    </div>
                </div>

                <!-- Talent plan — shown when talent slot is selected -->
                <div id="actorPlanWrap" style="display:none;margin:14px 0 4px;">
                    <div style="padding:12px 14px;border:1px solid var(--border);background:var(--bg);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);">
                        <div style="font-size:12px;font-weight:700;color:var(--text);">{{ TENANT.roles.talent|title }} — Free to join</div>
                        <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:3px;">Profile · Browse openings · Submit · Message {{ TENANT.roles.primary }}s</div>
                    </div>
                </div>

                <!-- Fan / Money — free-to-join message -->
                <div id="freeJoinWrap" style="display:none;margin:14px 0 4px;">
                    <div style="padding:12px 14px;border:1px solid var(--border);background:var(--bg);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);">
                        <div style="font-size:12px;font-weight:700;color:var(--text);" id="freeJoinTitle">Free to join</div>
                        <div style="font-family:var(--mono);font-size:8px;color:var(--text-mute);margin-top:3px;" id="freeJoinDesc">Create your profile and start browsing projects.</div>
                    </div>
                </div>

                <input type="hidden" name="plan" id="signupPlanField" value="solo">
                <input type="hidden" name="ref_code" id="signupRefCode" value="">

                <div style="margin:10px 0 4px;width:100%;overflow:hidden;">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11px;color:#9a8878;line-height:1.5;font-family:var(--mono);letter-spacing:.4px;width:100%;">
                        <input type="checkbox" name="terms_accepted" required style="width:13px;height:13px;min-width:13px;flex-shrink:0;accent-color:var(--gold);cursor:pointer;">
                        <span style="flex:1;min-width:0;">I agree to the <a href="/terms" target="_blank" style="color:var(--gold);text-decoration:underline;">Terms &amp; Conditions</a></span>
                    </label>
                </div>

                <button type="submit" class="btn btn-primary w-full" style="margin-top:8px;" id="signupSubmitBtn">Start Free Trial →</button>
                <div class="auth-fine">Private beta · Cancel anytime</div>
            </form>
        </div>

    </div>
</div>

<script>
// Expose the resolved tenant to client-side JS so static .js files can
// build tenant-aware URLs and resolve slot → role at submit time.
window.TENANT = {
  slug:        {{ TENANT.slug|tojson }},
  brand:       {{ TENANT.brand|tojson }},
  short_brand: {{ TENANT.short_brand|tojson }},
  canonical:   {{ TENANT.canonical|tojson }},
  roles: {
    primary: {{ TENANT.roles.primary|tojson }},
    talent:  {{ TENANT.roles.talent|tojson }},
    money:   {{ TENANT.roles.money|tojson }},
    fan:     {{ TENANT.roles.fan|tojson }},
  },
};
</script>
<script src="/static/js/index.js?v=celer-auth-10" defer></script>
{% if auth_error %}
<script>document.addEventListener("DOMContentLoaded", () => openAuth('signin'));</script>
{% endif %}