{# app/templates/shared/cdn-fallback.html #}
{# CDN with Local Fallback Pattern #}
{# This partial handles loading CDN resources with automatic fallback to local copies #}

{# Tailwind CSS with fallback #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/tailwind.min.css') }}';">

{# Alpine.js with fallback - must be loaded at the end of body #}
{# Usage: Include this partial at the bottom of your template, before page-specific scripts #}
<script>
// Alpine.js CDN with fallback
(function() {
    var script = document.createElement('script');
    script.defer = true;
    script.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js';

    script.onerror = function() {
        console.warn('Alpine.js CDN failed, loading local copy...');
        var fallbackScript = document.createElement('script');
        fallbackScript.defer = true;
        fallbackScript.src = '{{ url_for("static", path="shared/js/vendor/alpine.min.js") }}';
        document.head.appendChild(fallbackScript);
    };

    document.head.appendChild(script);
})();
</script>