{% extends "base.html" %}

{% block header_info %}
{% endblock %}

{% block header_actions %}
    <div class="view-toggle">
        <button class="toggle-btn {% if view_type == 'card' %}active{% endif %}" onclick="switchView('card')" aria-label="卡片视图">
            <svg class="toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="7" height="7"></rect>
                <rect x="14" y="3" width="7" height="7"></rect>
                <rect x="14" y="14" width="7" height="7"></rect>
                <rect x="3" y="14" width="7" height="7"></rect>
            </svg>
            <span class="toggle-text">卡片</span>
        </button>
        <button class="toggle-btn {% if view_type == 'table' %}active{% endif %}" onclick="switchView('table')" aria-label="表格视图">
            <svg class="toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="3" y1="9" x2="21" y2="9"></line>
                <line x1="3" y1="15" x2="21" y2="15"></line>
                <line x1="9" y1="3" x2="9" y2="21"></line>
                <line x1="15" y1="3" x2="15" y2="21"></line>
            </svg>
            <span class="toggle-text">表格</span>
        </button>
    </div>
{% endblock %}

{% block content %}
{% if fields %}
    <div class="field-filter-bar">
        <div class="field-filter-container">
            <a href="{{ url_for('index', view=view_type, q=search_query) }}" 
               class="field-chip {% if not current_field %}active{% endif %}">
                全部
            </a>
            {% for field in fields %}
                <a href="{{ url_for('index', view=view_type, field=field, q=search_query) }}" 
                   class="field-chip {% if current_field == field %}active{% endif %}">
                    {{ field }}
                </a>
            {% endfor %}
        </div>
    </div>
{% endif %}

{% if its %}
    {% if view_type == 'card' %}
        <div id="card-grid"
             class="card-grid masonry-grid"
             data-page="1"
             data-has-more="{{ 'true' if has_more else 'false' }}"
             data-per-page="{{ per_page or 12 }}">
            {% for it in its %}
                    <a class="card card-link masonry-item" href="{{ url_for('detail', id=it.id) }}">
                    <div class="card-content">
                        <div class="card-header-row">
                            <h3 class="card-title">{{ it.name }}</h3>
                            <p class="card-field clickable" onclick="filterByField('{{ it.field }}', event)">{{ it.field }}</p>
                        </div>
                        
                        <!-- Three Elements - Compact Horizontal Layout -->
                        <div class="card-elements-horizontal">
                            <div class="element-badge tooltip-container">
                                <span>{{ it.element1 }}</span>
                                {% if it.element1_sacrifice_explanation %}
                                    <div class="tooltip-content card-tooltip">
                                        <strong>{{ it.element1 }}无法满足时：</strong>
                                        {{ it.element1_sacrifice_explanation }}
                                    </div>
                                {% endif %}
                            </div>
                            <div class="element-badge tooltip-container">
                                <span>{{ it.element2 }}</span>
                                {% if it.element2_sacrifice_explanation %}
                                    <div class="tooltip-content card-tooltip">
                                        <strong>{{ it.element2 }}无法满足时：</strong>
                                        {{ it.element2_sacrifice_explanation }}
                                    </div>
                                {% endif %}
                            </div>
                            <div class="element-badge tooltip-container">
                                <span>{{ it.element3 }}</span>
                                {% if it.element3_sacrifice_explanation %}
                                    <div class="tooltip-content card-tooltip">
                                        <strong>{{ it.element3 }}无法满足时：</strong>
                                        {{ it.element3_sacrifice_explanation }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <p class="card-preview">{{ it.description[:150] }}...</p>
                        <div class="card-meta">
                            <span class="agree-count"><span class="meta-icon">赞</span>{{ it.agree_count }}</span>
                            <span class="comment-count"><span class="meta-icon">评</span>{{ it.comments|length }}</span>
                            <span class="card-cta">查看详情 →</span>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>
        <div id="card-loader" class="card-loader">加载中...</div>
        <div id="card-sentinel" class="card-sentinel" aria-hidden="true"></div>
    {% else %}
        <div id="table-container" class="table-container"
             data-page="1"
             data-has-more="{{ 'true' if has_more else 'false' }}"
             data-per-page="{{ per_page or 20 }}">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>领域</th>
                        <th>元素1</th>
                        <th>元素2</th>
                        <th>元素3</th>
                        <th>赞同</th>
                        <th>评论</th>
                        <th>创建时间</th>
                    </tr>
                </thead>
                <tbody id="table-body">
                    {% for it in its %}
                        <tr role="link" tabindex="0" aria-label="查看 {{ it.name }}"
                            onclick="location.href='{{ url_for('detail', id=it.id) }}'"
                            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); location.href='{{ url_for('detail', id=it.id) }}'; }">
                            <td class="table-name">{{ it.name }}</td>
                            <td>{{ it.field }}</td>
                            <td>{{ it.element1 }}</td>
                            <td>{{ it.element2 }}</td>
                            <td>{{ it.element3 }}</td>
                            <td>{{ it.agree_count }}</td>
                            <td>{{ it.comments|length }}</td>
                            <td>{{ it.created_at.strftime('%Y-%m-%d') }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="table-loader" class="card-loader">加载中...</div>
        <div id="table-sentinel" class="card-sentinel" aria-hidden="true"></div>
    {% endif %}
{% else %}
    <div class="empty-state">
        <p>暂无不可能三角数据</p>
        {% if current_user.is_authenticated %}
            <a href="{{ url_for('add_it') }}" class="btn btn-primary">添加第一个IT</a>
        {% else %}
            <a href="{{ url_for('register') }}" class="btn btn-primary">注册并添加</a>
        {% endif %}
    </div>
{% endif %}
{% endblock %}