{% extends "base.html" %}
{% block title %}{{ group.name }} — Shared Watchlist{% endblock %}

{% block content %}
<div class="space-y-6 max-w-4xl mx-auto">
    <!-- Header -->
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-10 h-10 rounded-lg bg-sky-900/50 flex items-center justify-center">
                <svg class="w-5 h-5 text-sky-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
            <div>
                <h1 class="text-xl font-bold text-white">{{ group.name }}</h1>
                <p class="text-xs text-gray-500">
                    Shared by <span class="text-gray-400">{{ owner.name }}</span>
                    &middot; {{ watchlist_coins|length }} coin{{ 's' if watchlist_coins|length != 1 }}
                </p>
            </div>
        </div>
        <div class="flex items-center gap-2 mt-3">
            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-sky-900/50 text-sky-400 border border-sky-800/50">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                </svg>
                Read-only view
            </span>
        </div>
    </div>

    <!-- Coin List -->
    {% if watchlist_coins|length == 0 %}
    <div class="bg-gray-900 border border-gray-800 rounded-xl p-8 text-center">
        <p class="text-gray-500 text-sm">Watchlist ini kosong</p>
    </div>
    {% else %}
    <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
        <!-- Desktop Table -->
        <div class="hidden md:block overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-800">
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">#</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">{{ item_label }}</th>
                        <th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">Price</th>
                        <th class="text-right text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">24h Change</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-4 py-3">Type</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                    {% for item in watchlist_coins %}
                    <tr class="hover:bg-gray-800/50 transition">
                        <td class="px-4 py-3 text-gray-500 text-xs">{{ loop.index }}</td>
                        <td class="px-4 py-3">
                            <a href="/market/asset/{{ item.asset.id }}" class="flex items-center gap-3 hover:opacity-80 transition">
                                {% if item.asset.icon_thumb_url %}
                                <img src="{{ item.asset.icon_thumb_url }}" alt="" class="w-7 h-7 rounded-full bg-gray-800">
                                {% else %}
                                <div class="w-7 h-7 rounded-full bg-gray-700 flex items-center justify-center text-xs font-bold text-white uppercase">
                                    {{ item.asset.symbol[:2] }}
                                </div>
                                {% endif %}
                                <div>
                                    <p class="text-white font-medium">{{ item.asset.name }}</p>
                                    <p class="text-xs text-gray-500 uppercase">{{ item.asset.symbol }}</p>
                                </div>
                            </a>
                        </td>
                        <td class="px-4 py-3 text-right">
                            {% if item.profile and item.profile.current_price_idr %}
                                {% if item.asset.asset_type == 'stock_us' %}
                                <span class="text-white font-mono">${{ '{:,.2f}'.format(item.profile.current_price_idr) }}</span>
                                {% else %}
                                <span class="text-white font-mono">Rp {{ '{:,.0f}'.format(item.profile.current_price_idr) }}</span>
                                {% endif %}
                            {% else %}
                            <span class="text-gray-600">—</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3 text-right">
                            {% if item.profile and item.profile.price_change_24h is not none %}
                                {% set change = item.profile.price_change_24h %}
                                <span class="font-mono text-sm {% if change > 0 %}text-emerald-400{% elif change < 0 %}text-red-400{% else %}text-gray-400{% endif %}">
                                    {{ '{:+.2f}'.format(change) }}%
                                </span>
                            {% else %}
                            <span class="text-gray-600">—</span>
                            {% endif %}
                        </td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-0.5 rounded text-xs font-medium
                                {% if item.asset.asset_type == 'crypto' %}bg-amber-900/40 text-amber-400
                                {% elif item.asset.asset_type == 'stock' %}bg-blue-900/40 text-blue-400
                                {% else %}bg-purple-900/40 text-purple-400{% endif %}">
                                {{ item.asset.asset_type|replace('_', ' ')|title }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Mobile Cards -->
        <div class="md:hidden divide-y divide-gray-800">
            {% for item in watchlist_coins %}
            <a href="/market/asset/{{ item.asset.id }}" class="flex items-center gap-3 p-4 hover:bg-gray-800/50 transition">
                {% if item.asset.icon_thumb_url %}
                <img src="{{ item.asset.icon_thumb_url }}" alt="" class="w-9 h-9 rounded-full bg-gray-800">
                {% else %}
                <div class="w-9 h-9 rounded-full bg-gray-700 flex items-center justify-center text-xs font-bold text-white uppercase">
                    {{ item.asset.symbol[:2] }}
                </div>
                {% endif %}
                <div class="flex-1 min-w-0">
                    <p class="text-white font-medium text-sm truncate">{{ item.asset.name }}</p>
                    <p class="text-xs text-gray-500 uppercase">{{ item.asset.symbol }}</p>
                </div>
                <div class="text-right">
                    {% if item.profile and item.profile.current_price_idr %}
                        {% if item.asset.asset_type == 'stock_us' %}
                        <p class="text-white text-sm font-mono">${{ '{:,.2f}'.format(item.profile.current_price_idr) }}</p>
                        {% else %}
                        <p class="text-white text-sm font-mono">Rp {{ '{:,.0f}'.format(item.profile.current_price_idr) }}</p>
                        {% endif %}
                    {% endif %}
                    {% if item.profile and item.profile.price_change_24h is not none %}
                        {% set change = item.profile.price_change_24h %}
                        <p class="text-xs font-mono {% if change > 0 %}text-emerald-400{% elif change < 0 %}text-red-400{% else %}text-gray-400{% endif %}">
                            {{ '{:+.2f}'.format(change) }}%
                        </p>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Footer -->
    <div class="text-center text-xs text-gray-600">
        {% if is_authenticated %}
        <a href="/market/watchlist" class="text-sky-500 hover:text-sky-400 transition">
            &larr; Kembali ke watchlist saya
        </a>
        {% else %}
        <a href="/login" class="text-sky-500 hover:text-sky-400 transition">
            Login untuk membuat watchlist sendiri &rarr;
        </a>
        {% endif %}
    </div>
</div>
{% endblock %}