{% 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 %}{{ base }} Exchange Rates — {{ base_info.name }} | OnlineConvert.cc{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}Live {{ base }} exchange rates against 160+ currencies. View {{ base_info.name }} rates, compare, and convert instantly.{% 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 fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .fade-in { animation: fadeIn 0.3s ease-out both; }
    .rate-row { transition: background 0.15s ease; }
    .rate-row:hover { background: rgba(99,102,241,0.06); }
    .stat-card { transition: all 0.25s ease; }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
    .sort-pill { transition: all 0.2s ease; cursor: pointer; }
    .sort-pill.active { background: #4f46e5; color: white; }
    .filter-pill { transition: all 0.2s ease; cursor: pointer; }
    .filter-pill.active { background: #4f46e5; color: white; }
</style>
{% endblock %}

{% block content %}
{% if api_unavailable %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
    <div class="bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-xl p-4 flex items-center gap-3">
        <i class="fa fa-exclamation-triangle text-amber-500 text-xl"></i>
        <div>
            <div class="font-semibold text-amber-800 dark:text-amber-300">{% trans %}Rate data temporarily unavailable{% endtrans %}</div>
            <div class="text-sm text-amber-700 dark:text-amber-400">{% trans %}The crypto rate API is currently experiencing issues. Please try again in a few minutes.{% endtrans %}</div>
        </div>
    </div>
</div>
{% endif %}
{% set _ht_currency_r = 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_currency_r == '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_currency_r == '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_currency_r == '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-10 md:py-16 relative z-10">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
            <div class="flex items-center gap-4">
                <img src="{{ base_info.icon_url }}" alt="{{ base }}" class="w-16 h-16 rounded-xl object-contain shadow-lg"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                <div class="w-16 h-16 rounded-xl bg-white/20 items-center justify-center text-white font-bold text-2xl hidden">{{ base[:2] }}</div>
                <div>
                    <h1 class="text-2xl md:text-3xl font-extrabold text-white">{% if _cms_heading %}{{ _cms_heading }}{% else %}{{ base }} <span class="font-normal text-white/80">{% trans %}Exchange Rates{% endtrans %}</span>{% endif %}</h1>
                    <p class="text-white/70 text-sm mt-1">{{ _cms_page_desc if _cms_page_desc else base_info.name }}{% if date and not _cms_page_desc %} · Rates as of {{ date }}{% endif %}</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <select id="base-selector" class="bg-white/15 border border-white/25 text-white rounded-lg px-3 py-2 text-sm outline-none cursor-pointer"
                    onchange="if(this.value) window.location='/currency/'+this.value">
                    <option value="" class="bg-gray-800">{{ _('Change base...') }}</option>
                    {% for code, info in all_currencies.items() %}
                    <option value="{{ code }}" class="bg-gray-800" {{ 'selected' if code == base|lower }}>{{ code|upper }} — {{ info.name }}</option>
                    {% endfor %}
                </select>
                <a href="/currency/{{ base|lower }}-to-usd" class="bg-white text-indigo-700 font-semibold px-4 py-2 rounded-lg text-sm hover:bg-indigo-50 transition-colors">
                    Convert {{ base }}
                </a>
            </div>
        </div>
    </div>
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-4 relative z-10" style="position:relative; z-index:2;">
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg p-4 mb-6 flex flex-col sm:flex-row items-center gap-4">
        <div class="flex items-center gap-2 flex-1">
            <span class="text-gray-500 dark:text-gray-400 text-sm font-medium">{% trans %}I have{% endtrans %}</span>
            <input type="number" id="amount-input" value="1" min="0" step="any"
                class="w-32 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-lg font-bold outline-none focus:ring-2 focus:ring-indigo-500 text-center">
            <span class="font-bold text-indigo-600 dark:text-indigo-400 text-lg">{{ base }}</span>
        </div>
        <button onclick="document.getElementById('amount-input').value=1;updateAmounts();"
            class="text-sm text-gray-500 hover:text-indigo-600 transition-colors">
            <i class="fa fa-undo mr-1"></i>{% trans %}Reset{% endtrans %}
        </button>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
    {% if stats %}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        <div class="stat-card bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 text-center">
            <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.total }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Total Currencies{% endtrans %}</div>
        </div>
        {% if stats.strongest %}
        <div class="stat-card bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 text-center">
            <div class="text-lg font-bold text-green-600 dark:text-green-400">{{ stats.strongest.code }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Strongest{% endtrans %} · {{ "%.4f"|format(stats.strongest.rate) }}</div>
        </div>
        {% endif %}
        {% if stats.weakest %}
        <div class="stat-card bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 text-center">
            <div class="text-lg font-bold text-red-600 dark:text-red-400">{{ stats.weakest.code }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Weakest{% endtrans %} · {{ "{:,.2f}".format(stats.weakest.rate) }}</div>
        </div>
        {% endif %}
        <div class="stat-card bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 text-center">
            <div class="text-lg font-bold text-gray-900 dark:text-white">{{ stats.fiat_count }} / {{ stats.crypto_count }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{% trans %}Fiat{% endtrans %} / {% trans %}Crypto{% endtrans %}</div>
        </div>
    </div>
    {% endif %}

    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 mb-4">
        <div class="relative flex-1">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            <input type="text" id="table-search" placeholder="{{ _('Search currencies...') }}"
                class="w-full pl-9 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-indigo-500">
        </div>
        <div class="flex items-center gap-2">
            <select id="sort-select" class="text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 outline-none cursor-pointer">
                <option value="code-asc">{{ _('Code A→Z') }}</option>
                <option value="code-desc">{{ _('Code Z→A') }}</option>
                <option value="rate-asc">{{ _('Rate Low→High') }}</option>
                <option value="rate-desc">{{ _('Rate High→Low') }}</option>
                <option value="name-asc">{{ _('Name A→Z') }}</option>
                <option value="change-desc">{{ _('Change ↑↓') }}</option>
            </select>
        </div>
        <div class="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
            <button class="filter-pill active px-3 py-1.5 rounded-md text-xs font-medium" data-filter="all">{% trans %}All{% endtrans %}</button>
            <button class="filter-pill px-3 py-1.5 rounded-md text-xs font-medium text-gray-600 dark:text-gray-400" data-filter="fiat">{% trans %}Fiat{% endtrans %}</button>
            <button class="filter-pill px-3 py-1.5 rounded-md text-xs font-medium text-gray-600 dark:text-gray-400" data-filter="crypto">{% trans %}Crypto{% endtrans %}</button>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full" id="rates-table">
                <thead>
                    <tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50">
                        <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">{% trans %}Currency{% endtrans %}</th>
                        <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">{% trans %}Rate per 1{% endtrans %} {{ base }}</th>
                        <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase hidden sm:table-cell">{% trans %}Your Amount{% endtrans %}</th>
                        <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase hidden md:table-cell">{% trans %}24h Change{% endtrans %}</th>
                        <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase w-20"></th>
                    </tr>
                </thead>
                <tbody id="rates-body">
                    {% set count = namespace(n=0) %}
                    {% for code, info in currencies.items() %}
                    {% if code != base|lower %}
                    {% set count.n = count.n + 1 %}
                    <tr class="rate-row border-b border-gray-100 dark:border-gray-800 {{ 'hidden' if count.n > 50 }}"
                        data-code="{{ code }}" data-name="{{ info.name|lower }}" data-rate="{{ info.rate }}" data-type="{{ info.type }}"
                        data-visible="{{ 'true' if count.n <= 50 else 'false' }}">
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-3">
                                <img src="{{ info.icon_url }}" alt="{{ code|upper }}" class="w-7 h-7 rounded object-contain"
                                    onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                                <div class="w-7 h-7 rounded bg-indigo-100 dark:bg-indigo-900/40 items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold text-xs hidden">{{ code[:2]|upper }}</div>
                                <div>
                                    <span class="font-semibold text-gray-900 dark:text-white text-sm">{{ code|upper }}</span>
                                    {% if info.type == 'crypto' %}
                                    <span class="ml-1 text-[10px] bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 px-1 py-0.5 rounded">{% trans %}CRYPTO{% endtrans %}</span>
                                    {% endif %}
                                    <div class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[150px]">{{ info.name }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <span class="font-mono text-sm font-semibold text-gray-900 dark:text-white">
                                {% if info.rate < 0.001 %}{{ "%.8f"|format(info.rate) }}{% elif info.rate < 1 %}{{ "%.6f"|format(info.rate) }}{% elif info.rate < 100 %}{{ "%.4f"|format(info.rate) }}{% elif info.rate < 10000 %}{{ "%.2f"|format(info.rate) }}{% else %}{{ "{:,.2f}".format(info.rate) }}{% endif %}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-right hidden sm:table-cell">
                            <span class="rate-result font-mono text-sm text-gray-700 dark:text-gray-300" data-rate="{{ info.rate }}">
                                {% if info.rate < 0.01 %}{{ "%.8f"|format(info.rate) }}{% elif info.rate < 100 %}{{ "%.4f"|format(info.rate) }}{% else %}{{ "{:,.2f}".format(info.rate) }}{% endif %}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-right hidden md:table-cell">
                            <span class="change-cell text-xs text-gray-400" data-code="{{ code }}">—</span>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <a href="/currency/{{ base|lower }}-to-{{ code }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 text-xs font-medium">
                                {% trans %}Convert →{% endtrans %}
                            </a>
                        </td>
                    </tr>
                    {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% set total_rows = currencies|length %}
    {% if total_rows > 50 %}
    <div class="text-center mt-4" id="show-all-wrapper">
        <button id="show-all-btn" onclick="showAllRows()" class="px-6 py-2 bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded-lg text-sm font-medium hover:bg-indigo-200 dark:hover:bg-indigo-900/60 transition-colors">
            Show all {{ total_rows }} currencies
        </button>
    </div>
    {% endif %}

    <div class="mt-10">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
            <i class="fa fa-exchange-alt text-indigo-500 mr-2"></i>Popular {{ base }} Pairs
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {% set popular_codes = ['usd','eur','gbp','jpy','cny','chf'] %}
            {% for pc in popular_codes %}
            {% if pc in currencies and pc != base|lower %}
            <a href="/currency/{{ base|lower }}-to-{{ pc }}" class="flex items-center gap-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:border-indigo-400 hover:shadow-md transition-all">
                <img src="{{ base_info.icon_url }}" alt="{{ base }}" class="w-8 h-8 rounded object-contain"
                    onerror="this.style.display='none';">
                <i class="fa fa-arrow-right text-gray-400 text-xs"></i>
                <img src="{{ currencies[pc].icon_url }}" alt="{{ pc|upper }}" class="w-8 h-8 rounded object-contain"
                    onerror="this.style.display='none';">
                <div class="flex-1 min-w-0">
                    <div class="font-semibold text-gray-900 dark:text-white text-sm">{{ base }}/{{ pc|upper }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">1 {{ base }} = {{ "%.4f"|format(currencies[pc].rate) if currencies[pc].rate < 10000 else "{:,.2f}".format(currencies[pc].rate) }} {{ pc|upper }}</div>
                </div>
                <span class="text-indigo-600 dark:text-indigo-400 text-xs font-medium">{% trans %}Convert →{% endtrans %}</span>
            </a>
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

{% set _page_id = page_id %}
{% include "shared/quick-faq.html" %}

{% endblock %}

{% block footer %}
{{ super() }}
<script>
(function(){
    var amountInput = document.getElementById('amount-input');
    var tableSearch = document.getElementById('table-search');
    var sortSelect = document.getElementById('sort-select');
    var tbody = document.getElementById('rates-body');
    var filterPills = document.querySelectorAll('.filter-pill');
    var currentFilter = 'all';

    window.updateAmounts = function(){
        var amount = parseFloat(amountInput.value) || 0;
        document.querySelectorAll('.rate-result').forEach(function(el){
            var rate = parseFloat(el.getAttribute('data-rate')) || 0;
            var val = amount * rate;
            if(val < 0.01) el.textContent = val.toFixed(8);
            else if(val < 100) el.textContent = val.toFixed(4);
            else el.textContent = val.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        });
    };
    amountInput.addEventListener('input', window.updateAmounts);

    tableSearch.addEventListener('input', function(){
        var q = this.value.toLowerCase().trim();
        var rows = tbody.querySelectorAll('tr');
        rows.forEach(function(row){
            var code = row.getAttribute('data-code') || '';
            var name = row.getAttribute('data-name') || '';
            var type = row.getAttribute('data-type') || '';
            var matchSearch = !q || code.indexOf(q) !== -1 || name.indexOf(q) !== -1;
            var matchFilter = currentFilter === 'all' || type === currentFilter;
            row.classList.remove('hidden');
            row.style.display = (matchSearch && matchFilter) ? '' : 'none';
        });
    });

    filterPills.forEach(function(pill){
        pill.addEventListener('click', function(){
            filterPills.forEach(function(p){ p.classList.remove('active'); });
            this.classList.add('active');
            currentFilter = this.getAttribute('data-filter');
            tableSearch.dispatchEvent(new Event('input'));
        });
    });

    sortSelect.addEventListener('change', function(){
        var rows = Array.from(tbody.querySelectorAll('tr'));
        var val = this.value;
        rows.sort(function(a, b){
            if(val === 'code-asc') return (a.getAttribute('data-code') || '').localeCompare(b.getAttribute('data-code') || '');
            if(val === 'code-desc') return (b.getAttribute('data-code') || '').localeCompare(a.getAttribute('data-code') || '');
            if(val === 'rate-asc') return (parseFloat(a.getAttribute('data-rate'))||0) - (parseFloat(b.getAttribute('data-rate'))||0);
            if(val === 'rate-desc') return (parseFloat(b.getAttribute('data-rate'))||0) - (parseFloat(a.getAttribute('data-rate'))||0);
            if(val === 'name-asc') return (a.getAttribute('data-name') || '').localeCompare(b.getAttribute('data-name') || '');
            if(val === 'change-desc'){
                var ca = a.querySelector('.change-cell');
                var cb = b.querySelector('.change-cell');
                var va = ca ? parseFloat(ca.textContent.replace(/[↑↓%]/g,'')) || 0 : 0;
                var vb = cb ? parseFloat(cb.textContent.replace(/[↑↓%]/g,'')) || 0 : 0;
                if(ca && ca.textContent.indexOf('↓') !== -1) va = -va;
                if(cb && cb.textContent.indexOf('↓') !== -1) vb = -vb;
                return vb - va;
            }
            return 0;
        });
        rows.forEach(function(r){ r.classList.remove('hidden'); tbody.appendChild(r); });
    });

    window.showAllRows = function(){
        tbody.querySelectorAll('tr').forEach(function(r){ r.classList.remove('hidden'); r.setAttribute('data-visible','true'); });
        var w = document.getElementById('show-all-wrapper');
        if(w) w.style.display = 'none';
    };

    var base = '{{ base }}';
    fetch('/api/rate-change/' + base.toLowerCase() + '/all')
        .then(function(r){ return r.json(); })
        .then(function(data){
            document.querySelectorAll('.change-cell').forEach(function(el){
                var code = el.getAttribute('data-code');
                if(!code) return;
                var val = data[code] || data[code.toUpperCase()];
                if(val !== undefined && val !== null){
                    var cls = val >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400';
                    var arrow = val >= 0 ? '↑' : '↓';
                    el.className = 'change-cell text-xs font-medium ' + cls;
                    el.textContent = arrow + Math.abs(val).toFixed(2) + '%';
                }
            });
        })
        .catch(function(){});
})();
</script>
{% endblock %}