{% extends "base.html" %}
{% set _cms_title = get_page_content(page_id, 'title', g.lang_code) %}
{% set _cms_desc = get_page_content(page_id, 'description', g.lang_code) %}
{% set _cms_heading = get_page_content(page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = get_page_content(page_id, 'page_description', g.lang_code) %}
{% set _cms_head_html = get_page_content(page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = get_page_content(page_id, 'og_image', g.lang_code) %}
{% block title %}{% if _cms_title %}{{ _cms_title }}{% else %}{% trans %}World Currency Explorer | OnlineConvert.cc{% endtrans %}{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Live exchange rates for 160+ fiat currencies and top cryptocurrencies. Compare rates, view trends, and convert instantly.{% endtrans %}{% endif %}{% endblock %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block extra_head %}{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}{% endblock %}

{% block head %}
{{ super() }}
<style>
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .marquee-track { display: flex; animation: marquee 40s linear infinite; }
    .marquee-track:hover { animation-play-state: paused; }
    .currency-card {
        transition: all 0.25s ease;
    }
    .currency-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
        border-color: #6366f1;
    }
    .fade-card { animation: fadeIn 0.3s ease-out both; }
    .pill-tab { transition: all 0.2s ease; }
    .pill-tab.active {
        background: white;
        color: #4338ca;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .featured-card {
        transition: all 0.25s ease;
    }
    .featured-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }
</style>
{% endblock %}

{% block content %}
{% set _ht_currencies = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
{% set _hero_img = site.get('hero_bg_image', '') if site is defined else '' %}
{% set _hero_lcl = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
{% set _hero_lcd = (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' %}
<section class="hero-gradient relative overflow-hidden">
        {% if _ht_currencies == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _ht_currencies == 'gradient' %}
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
{% elif _ht_currencies == 'image' and _hero_img %}
    <div class="hero-bg-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>
{% endif %}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 md:py-20 relative z-10">
        <div class="text-center max-w-3xl mx-auto">
            <span class="tool-badge mb-4 inline-block">{% trans %}CURRENCY{% endtrans %}</span>
            <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">
                <i class="fa fa-globe mr-2"></i>{{ _cms_heading if _cms_heading else _('World Currency Explorer') }}
            </h1>
            <p class="text-lg text-white/90 mb-8">{{ _cms_page_desc if _cms_page_desc else _('Live rates for 160+ fiat currencies & top cryptocurrencies') }}</p>

            <div class="max-w-xl mx-auto mb-6">
                <div class="relative">
                    <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-white/50"></i>
                    <input type="text" id="currency-search" placeholder="{{ _('Search currencies...') }}"
                        value="{{ q }}"
                        class="w-full pl-11 pr-16 py-3.5 rounded-full bg-white/15 border border-white/20 text-white placeholder-white/50 text-base outline-none focus:bg-white/25 focus:border-white/40 transition-all">
                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 text-xs border border-white/20 rounded px-1.5 py-0.5 hidden md:inline">/</span>
                </div>
            </div>

            <div class="flex justify-center gap-2">
                <a href="?type=all" class="pill-tab px-5 py-2 rounded-full text-sm font-medium text-white/80 hover:bg-white/10 {% if filter_type == 'all' %}active{% endif %}">
                    All
                </a>
                <a href="?type=fiat" class="pill-tab px-5 py-2 rounded-full text-sm font-medium text-white/80 hover:bg-white/10 {% if filter_type == 'fiat' %}active{% endif %}">
                    Fiat
                </a>
                <a href="?type=crypto" class="pill-tab px-5 py-2 rounded-full text-sm font-medium text-white/80 hover:bg-white/10 {% if filter_type == 'crypto' %}active{% endif %}">
                    Crypto
                </a>
            </div>
        </div>
    </div>
</section>

<div class="bg-gray-900 text-white py-2.5 overflow-hidden relative">
    <div class="flex whitespace-nowrap">
        <div class="marquee-track">
            {% if popular_rates %}
            {% for code, rate in popular_rates.items() %}
            <span class="mx-4 text-sm font-medium">
                <span class="text-gray-400">USD/{{ code|upper }}</span>
                <span class="text-white ml-1">{{ "%.4f"|format(rate) if rate < 10 else "%.2f"|format(rate) if rate < 10000 else "{:,.0f}".format(rate) }}</span>
                {% if code in crypto_stats and crypto_stats[code].change_24h is not none %}
                <span class="{{ 'text-green-400' if crypto_stats[code].change_24h >= 0 else 'text-red-400' }} ml-1">
                    {{ '↑' if crypto_stats[code].change_24h >= 0 else '↓' }}{{ "%.1f"|format(crypto_stats[code].change_24h|abs) }}%
                </span>
                {% endif %}
                <span class="text-gray-600 mx-2">·</span>
            </span>
            {% endfor %}
            {% endif %}
            {% for cs_code, cs in crypto_stats.items() %}
            {% if cs.price %}
            <span class="mx-4 text-sm font-medium">
                <span class="text-gray-400">{{ cs_code|upper }}/USD</span>
                <span class="text-white ml-1">${{ "{:,.2f}".format(cs.price) if cs.price < 100000 else "{:,.0f}".format(cs.price) }}</span>
                {% if cs.change_24h is not none %}
                <span class="{{ 'text-green-400' if cs.change_24h >= 0 else 'text-red-400' }} ml-1">
                    {{ '↑' if cs.change_24h >= 0 else '↓' }}{{ "%.1f"|format(cs.change_24h|abs) }}%
                </span>
                {% endif %}
                <span class="text-gray-600 mx-2">·</span>
            </span>
            {% endif %}
            {% endfor %}

            {% if popular_rates %}
            {% for code, rate in popular_rates.items() %}
            <span class="mx-4 text-sm font-medium">
                <span class="text-gray-400">USD/{{ code|upper }}</span>
                <span class="text-white ml-1">{{ "%.4f"|format(rate) if rate < 10 else "%.2f"|format(rate) if rate < 10000 else "{:,.0f}".format(rate) }}</span>
                <span class="text-gray-600 mx-2">·</span>
            </span>
            {% endfor %}
            {% endif %}
            {% for cs_code, cs in crypto_stats.items() %}
            {% if cs.price %}
            <span class="mx-4 text-sm font-medium">
                <span class="text-gray-400">{{ cs_code|upper }}/USD</span>
                <span class="text-white ml-1">${{ "{:,.2f}".format(cs.price) if cs.price < 100000 else "{:,.0f}".format(cs.price) }}</span>
                <span class="text-gray-600 mx-2">·</span>
            </span>
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {% if not q %}
    <div class="mb-10">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
            <i class="fa fa-star text-amber-500 mr-2"></i>Popular Currencies
        </h2>
        <div class="flex gap-4 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-hide">
            {% set featured = ['usd','eur','gbp','jpy','cny','btc','eth','sol'] %}
            {% for fc in featured %}
            {% if fc in currencies %}
            <a href="/currency/{{ fc }}" class="featured-card flex-shrink-0 w-40 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 text-center">
                <img src="{{ currencies[fc].icon_url }}" alt="{{ fc|upper }}"
                    class="w-12 h-12 mx-auto mb-2 rounded-lg object-contain"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                <div class="w-12 h-12 mx-auto mb-2 rounded-lg bg-indigo-500 items-center justify-center text-white font-bold text-lg hidden">{{ fc[:2]|upper }}</div>
                <div class="font-bold text-gray-900 dark:text-white text-sm">{{ fc|upper }}</div>
                <div class="text-gray-500 dark:text-gray-400 text-xs truncate">{{ currencies[fc].name }}</div>
                <div class="mt-2 text-indigo-600 dark:text-indigo-400 text-xs font-medium">{% trans %}View rates →{% endtrans %}</div>
            </a>
            {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="flex items-center justify-between mb-4">
        <p class="text-sm text-gray-500 dark:text-gray-400" id="count-display">
            Showing <span id="visible-count">{{ currencies|length }}</span> of <span id="total-count">{{ currencies|length }}</span> currencies
        </p>
    </div>

    <div id="currency-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
        {% for code, info in currencies.items() %}
        <a href="/currency/{{ code }}"
           class="currency-card fade-card bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 block"
           data-code="{{ code }}" data-name="{{ info.name|lower }}" data-type="{{ info.type }}"
           style="animation-delay: {{ loop.index0 * 15 }}ms">
            <div class="flex items-start gap-3">
                <img src="{{ info.icon_url }}" alt="{{ code|upper }}"
                    class="w-10 h-10 rounded-lg object-contain flex-shrink-0"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                <div class="w-10 h-10 rounded-lg bg-indigo-500 items-center justify-center text-white font-bold text-sm flex-shrink-0 hidden">{{ code[:2]|upper }}</div>
                <div class="min-w-0 flex-1">
                    <div class="font-bold text-gray-900 dark:text-white text-sm">{{ code|upper }}</div>
                    <div class="text-gray-500 dark:text-gray-400 text-xs truncate">{{ info.name }}</div>
                </div>
            </div>
            <div class="flex items-center gap-1.5 mt-3">
                {% if info.symbol %}
                <span class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 px-2 py-0.5 rounded-full">{{ info.symbol }}</span>
                {% endif %}
                {% if info.type == 'crypto' %}
                <span class="text-xs bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 px-2 py-0.5 rounded-full font-medium">{% trans %}CRYPTO{% endtrans %}</span>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>

    <div id="empty-state" class="hidden py-16 text-center">
        <i class="fa fa-globe text-6xl text-gray-300 dark:text-gray-600 mb-4"></i>
        <p class="text-gray-500 dark:text-gray-400 text-lg">{% trans %}No currencies match{% endtrans %} '<span id="empty-query"></span>'</p>
    </div>

    <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
            <div class="w-14 h-14 mx-auto mb-3 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center">
                <i class="fa fa-exchange-alt text-2xl text-indigo-600 dark:text-indigo-400"></i>
            </div>
            <h3 class="font-bold text-gray-900 dark:text-white mb-1">{% trans %}Live Rates{% endtrans %}</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}Updated daily from European Central Bank & ExchangeRate-API{% endtrans %}</p>
        </div>
        <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
            <div class="w-14 h-14 mx-auto mb-3 bg-green-100 dark:bg-green-900/40 rounded-xl flex items-center justify-center">
                <i class="fa fa-globe text-2xl text-green-600 dark:text-green-400"></i>
            </div>
            <h3 class="font-bold text-gray-900 dark:text-white mb-1">{% trans %}160+ Currencies{% endtrans %}</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}All major fiat currencies plus top cryptocurrencies{% endtrans %}</p>
        </div>
        <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
            <div class="w-14 h-14 mx-auto mb-3 bg-purple-100 dark:bg-purple-900/40 rounded-xl flex items-center justify-center">
                <i class="fa fa-chart-line text-2xl text-purple-600 dark:text-purple-400"></i>
            </div>
            <h3 class="font-bold text-gray-900 dark:text-white mb-1">{% trans %}Historical Charts{% endtrans %}</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}7, 30, and 90-day rate history with trend analysis{% endtrans %}</p>
        </div>
    </div>
</div>
{% endblock %}

{% block footer %}
{{ super() }}
<script>
(function(){
    var input = document.getElementById('currency-search');
    var cards = document.querySelectorAll('.currency-card');
    var grid = document.getElementById('currency-grid');
    var emptyState = document.getElementById('empty-state');
    var emptyQuery = document.getElementById('empty-query');
    var visibleCount = document.getElementById('visible-count');
    var totalCount = document.getElementById('total-count');

    totalCount.textContent = cards.length;

    input.addEventListener('keyup', function(){
        var q = this.value.toLowerCase().trim();
        var shown = 0;
        cards.forEach(function(c){
            var code = c.getAttribute('data-code') || '';
            var name = c.getAttribute('data-name') || '';
            var match = !q || code.indexOf(q) !== -1 || name.indexOf(q) !== -1;
            c.style.display = match ? '' : 'none';
            if(match) shown++;
        });
        visibleCount.textContent = shown;
        if(shown === 0 && q) {
            emptyState.classList.remove('hidden');
            emptyQuery.textContent = q;
            grid.classList.add('hidden');
        } else {
            emptyState.classList.add('hidden');
            grid.classList.remove('hidden');
        }
    });

    document.addEventListener('keydown', function(e){
        if(e.key === '/' && document.activeElement.tagName !== 'INPUT') {
            e.preventDefault();
            input.focus();
        }
    });
})();
</script>
{% endblock %}