<!-- ==========================================================
     LAAU
     Student & Executive Portal

     File        : my-credentials.html
     Page        : My Credentials
     Experience  : Credential Portfolio
     Version     : 3.3.1
     Status      : ACTIVE
     Date        : July 2026

     Governance  : Portal Governance v3.0
     Architecture: Governed Credential Portfolio

     Purpose
     ----------------------------------------------------------
     Provides the authenticated learner with a governed
     professional portfolio of earned LAAU
     credentials.

     The page acts as the learner-facing entry point for:

     • Credential discovery
     • Credential Workspace access
     • Official credential assets
     • Certificate and badge preview
     • Downloads
     • Verification
     • Professional sharing
     • Licensed learning resources
     • Future progression opportunities

     Responsibilities
     ----------------------------------------------------------
     ✓ Provide the authenticated portal page structure
     ✓ Provide the shared portal shell
     ✓ Mount the shared portal sidebar
     ✓ Mount the shared portal toolbar
     ✓ Mount the institutional portal footer
     ✓ Host the Credential Portfolio presentation region
     ✓ Load authentication dependencies
     ✓ Load authorization dependencies
     ✓ Load entitlement dependencies
     ✓ Load programme metadata dependencies
     ✓ Load credential services and renderers
     ✓ Load Credential Workspace components
     ✓ Load credential asset preview components
     ✓ Keep protected content governed by authentication,
       authorization and entitlement resolution

     Non Responsibilities
     ----------------------------------------------------------
     ✗ Firebase application initialization logic
     ✗ Authentication decisions
     ✗ Sign-out orchestration
     ✗ Authorization decisions
     ✗ Entitlement decisions
     ✗ Credential visibility decisions
     ✗ Credential filtering
     ✗ Firestore queries
     ✗ Cloud Storage queries
     ✗ Credential asset publication
     ✗ Credential asset generation
     ✗ Administrative operations
     ✗ Credential card rendering logic
     ✗ Credential Workspace rendering logic
     ✗ Certificate or badge preview rendering logic
     ✗ Sidebar rendering logic
     ✗ Toolbar rendering logic
     ✗ Footer rendering logic

     Experience Hierarchy
     ----------------------------------------------------------
     Dashboard
          ↓
     My Credentials
          ↓
     Credential Portfolio
          ↓
     Credential Workspace
          ↓
     Official Assets
          ↓
     Licensed Learning Resources
          ↓
     Verification
          ↓
     Professional Sharing
          ↓
     Future Progression

     Architectural Position
     ----------------------------------------------------------
     Firebase Authentication
          ↓
     PortalAuth
          ↓
     Portal Authorization
          ↓
     Entitlement Resolution
          ↓
     Credential Service
          ↓
     Credential Renderer
          ↓
     Credential Detail Actions
          ↓
     Credential Detail Overlay
          ↓
     Credential Assets Section
          ↓
     Credential Asset Service
          ↓
     Credential Asset Preview

     Governance Rules
     ----------------------------------------------------------
     • Firebase Authentication remains the identity
       authority.

     • PortalAuth remains the public portal authentication
       facade.

     • PortalSessionService remains the explicit sign-out
       authority.

     • Credential visibility is determined exclusively by
       resolvePortalEntitlements.js.

     • This page must never query Firestore directly.

     • This page must never query Cloud Storage directly.

     • This page must never perform credential filtering.

     • This page must never determine authorization state.

     • This page must never resolve entitlement rules.

     • Credential retrieval is delegated exclusively to
       credential-service.js.

     • Credential presentation is delegated exclusively to
       credential-renderer.js.

     • Credential selection is delegated exclusively to
       credential-detail-actions.js.

     • Credential Workspace rendering is delegated
       exclusively to credential-detail-overlay.js.

     • Credential asset resolution is delegated
       exclusively to credential-asset-service.js.

     • Credential preview is delegated exclusively to
       credential-asset-preview.js.

     • Admin Portal writes and publishes credential assets.

     • Student Portal consumes published assets only.

     • Shared portal components remain authoritative for
       sidebar, toolbar and footer presentation.

     • My Credentials remains the learner-facing navigation
       and page name.

     • Credential Portfolio remains the complete
       professional portfolio experience.

     • Credential Workspace remains the only detailed
       credential experience.

     • The Credential Workspace remains overlay-first.

     • This page owns layout and dependency composition only.

     Naming Standard
     ----------------------------------------------------------
     Navigation Label
     • My Credentials

     Page Experience
     • Credential Portfolio

     Individual Credential Experience
     • Credential Workspace

     Dependency Order
     ----------------------------------------------------------
     Firebase SDK
          ↓
     firebase-init.js
          ↓
     portal-auth.js
          ↓
     portal-session-service.js
          ↓
     entitlement.js
          ↓
     resolvePortalEntitlements.js
          ↓
     portal-authorization.js
          ↓
     sidebar.js
          ↓
     toolbar.js
          ↓
     footer.js
          ↓
     program-service.js
          ↓
     credential-registry.js
          ↓
     credential-validation.js
          ↓
     credential-asset-service.js
          ↓
     Asset Preview Renderers
          ↓
     credential-asset-preview.js
          ↓
     Credential Workspace Sections
          ↓
     credential-detail-overlay.js
          ↓
     credential-detail-actions.js
          ↓
     credential-renderer.js
          ↓
     credential-service.js

     Change History
     ----------------------------------------------------------
     v3.3.1

     • Aligned the shared sidebar dependency with the
       production Learning Resources shell.

     • Updated sidebar.js cache version from v1.5.0 to
       v1.6.0.

     • Restored fail-closed authenticated-content visibility
       while PortalAuth resolves the learner session.

     • Preserved the complete credential service,
       workspace, preview and entitlement dependency chain.

     v3.3.0

     • Adopted the centralized authenticated Student &
       Executive Portal shell.

     • Added persistent shared portal sidebar navigation.

     • Added shared authenticated portal toolbar.

     • Added institutional portal footer.

     • Added My Credentials active navigation context.

     • Removed the public website header experience.

     • Removed the public website navigation menu.

     • Removed the redundant Back to Dashboard link.

     • Preserved the canonical My Credentials route.

     • Preserved the complete Credential Portfolio
       presentation region.

     • Preserved the governed Credential Workspace overlay.

     • Preserved resolver-owned credential visibility.

     • Preserved the credential service dependency chain.

     • Preserved certificate, trainer certificate and badge
       preview capabilities.

     • Preserved credential asset, verification and
       recognition components.

     v3.2.1

     • Corrected Firebase initialization path to the
       governed authentication foundation directory.

     • Corrected PortalAuth path to the governed
       authentication foundation directory.

     • Aligned Firebase and PortalAuth cache versions
       with the authenticated dashboard.

     v3.2.0

     • Added shared overlay framework styles.

     • Adopted the shared Credential Detail Overlay
       stylesheet.

     • Adopted the shared Credential Asset Preview
       stylesheet.

     • Added explicit portal authorization dependency.

     • Corrected the Credential Workspace architectural
       flow to include Credential Assets Section.

     • Preserved My Credentials as the learner-facing
       navigation and page name.

     • Preserved Credential Portfolio as the professional
       portfolio experience.

     • Preserved Credential Workspace as the only detailed
       credential experience.

     • Preserved resolver-owned credential visibility.

     • Preserved service-oriented portal architecture.

     v3.1.0

     • Repositioned My Credentials as the learner's
       governed Credential Portfolio.

     • Removed obsolete inline credential preview
       containers.

     • Adopted the shared Credential Detail Overlay as the
       only Credential Workspace.

     • Added professional portfolio positioning.

     • Added the complete Credential Workspace dependency
       chain.

     • Prepared the page for licensed learning resources.

     v3.0.0

     • Introduced governed inline credential experience.

     • Established rendering regions for hero,
       credential information, recognition assets and
       actions.

     v2.0.0

     • Introduced Credential Portfolio Experience.

     • Simplified page architecture.

     • Preserved entitlement-driven visibility.

     v1.0.0

     • Initial governed implementation.

========================================================== -->

<!doctype html>

<html
    lang="en"
    data-portal-auth-state="pending">

<head>

    <meta charset="utf-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1">

    <meta
        name="description"
        content="Access your LAAU credentials, official assets, learning resources and professional achievements.">

    <meta
        name="robots"
        content="noindex, nofollow, noarchive">

    <title>
        My Credentials | LAAU
    </title>


    <!-- ==================================================
         CORE PORTAL STYLES
    ================================================== -->

    <link
        rel="stylesheet"
        href="/assets/css/site.css">

    <link
        rel="stylesheet"
        href="/assets/css/portal.css">


    <!-- ==================================================
         SHARED PORTAL TOOLBAR
    ================================================== -->

    <link
        rel="stylesheet"
        href="/assets/css/components/toolbar.css?v=1.2.0">


    <!-- ==================================================
         AUTHENTICATED PORTAL FOOTER
    ================================================== -->

    <link
        rel="stylesheet"
        href="/assets/css/components/footer.css?v=2.0.0">


    <!-- ==================================================
         SHARED OVERLAY FRAMEWORK
    ================================================== -->

    <link
        rel="stylesheet"
        href="/assets/css/components/overlay.css">


    <!-- ==================================================
         CREDENTIAL PORTFOLIO STYLES
    ================================================== -->

    <link
        rel="stylesheet"
        href="/credentials/assets/css/credentials.css">

    <link
        rel="stylesheet"
        href="/credentials/assets/css/credential-preview.css">


    <!-- ==================================================
         CREDENTIAL WORKSPACE STYLES
    ================================================== -->

    <link
        rel="stylesheet"
        href="/assets/css/components/credential-detail/credential-detail-overlay.css">

    <link
        rel="stylesheet"
        href="/assets/css/components/asset-preview/credential-asset-preview.css?v=20260922-badge-actions-1">

<link rel="stylesheet" href="/assets/css/laau-brand.css?v=20260920-portal-brand-1">
</head>


<body data-page="my-credentials">

    <div class="portal-shell">


        <!-- ==================================================
             PORTAL SIDEBAR

             sidebar.js renders the centralized authenticated
             portal navigation into this mount.

             data-page="my-credentials" identifies the active
             navigation item.
        ================================================== -->

        <aside
            id="portal-sidebar"
            class="portal-sidebar">
        </aside>


        <!-- ==================================================
             PORTAL CONTENT SHELL
        ================================================== -->

        <section class="portal-content-shell">


            <!-- ==============================================
                 PORTAL TOOLBAR

                 toolbar.js renders breadcrumb, page title and
                 authenticated learner account control.
            =============================================== -->

            <header
                id="portal-toolbar"
                class="portal-toolbar">
            </header>


            <!-- ==============================================
                 MY CREDENTIALS PAGE
            =============================================== -->

            <main
                id="main-content"
                class="portal-home credentials-page">

                <div class="portal-page">


                    <!-- ======================================
                         PAGE HEADER
                    ======================================= -->

                    <header class="page-header">

                        <p class="page-eyebrow">
                            Professional Portfolio
                        </p>

                        <h1>
                            My Credentials
                        </h1>

                        <p class="page-description">

                            Access your LAAU
                            credentials, official assets,
                            learning resources and professional
                            achievements.

                        </p>

                    </header>


                    <!-- ======================================
                         ACCESSIBLE PAGE STATUS

                         This provides a stable status region
                         for authentication or credential
                         service messages without duplicating
                         credential rendering responsibilities.
                    ======================================= -->

                    <div
                        id="credentialPageStatus"
                        class="credential-page-status"
                        role="status"
                        aria-live="polite"
                        aria-atomic="true">
                    </div>


                    <!-- ======================================
                         AUTHENTICATED CREDENTIAL EXPERIENCE

                         Credential cards are rendered
                         exclusively by credential-renderer.js.

                         Credential visibility is resolved
                         before rendering.

                         This region performs no retrieval,
                         filtering, authorization or
                         entitlement resolution.
                    ======================================= -->

                    <section
                        id="signedInUI"
                        hidden
                        aria-hidden="true">

                        <section
                            class="credential-portfolio-section"
                            aria-labelledby="credential-portfolio-heading">

                            <div class="credential-portfolio-heading">

                                <h2 id="credential-portfolio-heading">
                                    Credential Portfolio
                                </h2>

                                <p>

                                    Select a credential to open
                                    its professional workspace.

                                </p>

                            </div>


                            <!-- ==============================
                                 CREDENTIAL RENDERING MOUNT

                                 Do not rename this ID.

                                 credential-renderer.js and
                                 credential-service.js depend on
                                 this governed presentation
                                 region.
                            =============================== -->

                            <section
                                id="credentials-container"
                                class="credential-grid"
                                aria-live="polite"
                                aria-busy="true">

                                <div
                                    class="loading-state"
                                    role="status">

                                    <span
                                        class="loading-state-indicator"
                                        aria-hidden="true">
                                    </span>

                                    <span>

                                        Loading your credential
                                        portfolio...

                                    </span>

                                </div>

                            </section>

                        </section>

                    </section>


                    <!-- ======================================
                         SIGNED-OUT FALLBACK

                         PortalAuth remains responsible for
                         redirecting unauthenticated users to
                         the governed portal login page.
                    ======================================= -->

                    <section
                        id="signedOutUI"
                        hidden
                        aria-hidden="true">
                    </section>

                </div>

            </main>


            <!-- ==============================================
                 INSTITUTIONAL PORTAL FOOTER

                 The footer remains inside
                 .portal-content-shell so it aligns only with
                 portal content and does not extend beneath the
                 fixed sidebar.
            =============================================== -->

            <div id="site-footer"></div>

        </section>

    </div>


    <!-- ==================================================
         PORTAL CONTEXT
    ================================================== -->

    <script>

        window.__AAIU_CONTEXT =
            "portal";

        window.__AAIU_PAGE =
            "my-credentials";

        window.__AAIU_EXPERIENCE =
            "credential-portfolio";

        window.__AAIU_PORTAL_LOGIN_URL__ =
            "/login.html";

    </script>


    <!-- ==================================================
         FIREBASE COMPAT SDK

         Firestore remains required by governed service-layer
         consumers such as CredentialAssetService.

         This page itself does not access Firestore.
    ================================================== -->

    <script
        src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js">
    </script>

    <script
        src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js">
    </script>

    <script
        src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js">
    </script>


    <!-- ==================================================
         AUTHENTICATION FOUNDATION

         firebase-init.js
              ↓
         portal-auth.js
              ↓
         portal-session-service.js
    ================================================== -->

    <script
        src="/assets/js/auth/firebase-init.js?v=1.4.0">
    </script>

    <script
        src="/assets/js/auth/portal-auth.js?v=2.0.1">
    </script>

    <script
        src="/assets/js/auth/portal-session-service.js?v=1.2.1">
    </script>


    <!-- ==================================================
         ENTITLEMENT FOUNDATION

         Responsibilities
         --------------------------------------------------
         • Retrieve portal entitlement source data
         • Publish portal entitlement state
         • Dispatch entitlements:ready

         Governance
         --------------------------------------------------
         • No UI rendering
         • No credential presentation
         • No asset presentation
    ================================================== -->

    <script
        src="/assets/js/entitlement.js">
    </script>

    <script
        src="/assets/js/services/entitlements/resolvePortalEntitlements.js">
    </script>


    <!-- ==================================================
         AUTHORIZATION FOUNDATION

         Authorization remains a platform concern.

         Credential visibility remains owned by the
         entitlement resolver.
    ================================================== -->

    <script
        src="/assets/js/services/authorization/portal-authorization.js">
    </script>


    <!-- ==================================================
         SHARED PORTAL COMPONENTS

         sidebar.js reads data-page="my-credentials" and
         renders the My Credentials active state.

         toolbar.js renders the authenticated page toolbar.

         footer.js renders the institutional portal footer.
    ================================================== -->

    <script
        src="/assets/js/components/sidebar.js?v=20260920-portal-brand-1">
    </script>

    <script
        src="/assets/js/components/toolbar.js?v=1.4.0">
    </script>

    <script
        src="/assets/js/footer.js?v=2.0.0">
    </script>


    <!-- ==================================================
         PROGRAMME FOUNDATION

         Required by CredentialService for programme
         metadata enrichment.
    ================================================== -->

    <script
        src="/assets/js/services/programs/program-service.js">
    </script>


    <!-- ==================================================
         CREDENTIAL DOMAIN FOUNDATION
    ================================================== -->

    <script
        src="/assets/js/services/credentials/credential-registry.js">
    </script>

    <script
        src="/assets/js/services/credentials/credential-validation.js">
    </script>

    <script
        src="/assets/js/services/credentials/credential-asset-service.js?v=20260922-asset-lookup-1">
    </script>


    <!-- ==================================================
         ASSET PREVIEW RENDERERS

         Individual renderers must load before the shared
         CredentialAssetPreview orchestrator.
    ================================================== -->

    <script
        src="/assets/js/components/asset-preview/renderers/certificate-preview.js">
    </script>

    <script
        src="/assets/js/components/asset-preview/renderers/trainer-certificate-preview.js">
    </script>

    <script
        src="/assets/js/components/asset-preview/renderers/badge-preview.js">
    </script>

    <script
        src="/assets/js/components/asset-preview/credential-asset-preview.js?v=20260922-badge-actions-1">
    </script>


    <!-- ==================================================
         CREDENTIAL WORKSPACE SECTIONS

         Each component owns only its presentation region.
    ================================================== -->

    <script
        src="/assets/js/components/credential-detail/credential-detail-header.js?v=20260922-issue-date-1">
    </script>

    <script
        src="/assets/js/components/credential-detail/credential-information-section.js">
    </script>

    <script
        src="/assets/js/components/credential-detail/credential-assets-section.js">
    </script>

    <script
        src="/assets/js/components/credential-detail/credential-verification-section.js">
    </script>

    <script
        src="/assets/js/components/credential-detail/credential-recognition-section.js">
    </script>


    <!-- ==================================================
         CREDENTIAL WORKSPACE OVERLAY

         The overlay remains the single governed workspace
         for credential information, official assets,
         verification, recognition and future learning
         resources.
    ================================================== -->

    <script
        src="/assets/js/components/credential-detail/credential-detail-overlay.js?v=20260922-badge-actions-1">
    </script>


    <!-- ==================================================
         CREDENTIAL INTERACTION SERVICES
    ================================================== -->

    <script
        src="/assets/js/services/credentials/credential-detail-actions.js?v=20260922-badge-actions-1">
    </script>


    <!-- ==================================================
         CREDENTIAL PORTFOLIO

         Renderer must load before CredentialService.

         CredentialService initializes after published
         entitlement readiness.
    ================================================== -->

    <script
        src="/assets/js/services/credentials/credential-renderer.js?v=20260920-portal-brand-1">
    </script>

    <script
        src="/assets/js/services/credentials/credential-service.js">
    </script>


    <!-- ==================================================
         NOSCRIPT FALLBACK
    ================================================== -->

    <noscript>

        <section class="credential-noscript">

            <h1>
                JavaScript is required
            </h1>

            <p>

                JavaScript must be enabled to access your
                LAAU credential portfolio.

            </p>

            <p>

                Enable JavaScript in your browser and reload
                this page.

            </p>

        </section>

    </noscript>

</body>

</html>