{# templates/friend_links/links_list.html #}
<div class="container py-4">
    {# 分组导航 #}
    <ul class="nav nav-tabs mb-4" id="linkGroups" role="tablist">
        {% for group in link_groups %}
        <li class="nav-item" role="presentation">
            <button class="nav-link {% if forloop.first %}active{% endif %}" 
                    id="tab-{{ group.id }}" 
                    data-bs-toggle="tab" 
                    data-bs-target="#panel-{{ group.id }}" 
                    type="button" 
                    role="tab"
                    aria-controls="panel-{{ group.id }}">
                {{ group.name }}
            </button>
        </li>
        {% endfor %}
    </ul>

    {# 分组内容 #}
    <div class="tab-content">
        {% for group in link_groups %}
        <div class="tab-pane fade {% if forloop.first %}show active{% endif %}" 
             id="panel-{{ group.id }}" 
             role="tabpanel" 
             aria-labelledby="tab-{{ group.id }}">
            <div class="nav ">
                {% for link in group.friendlink_set.all %}
                <a href="{{ link.url }}" 
                   class="nav-link d-flex align-items-center py-3"
                   target="_blank" {% if is_nofollow %}rel="nofollow"{% endif %} 
                   data-bs-toggle="tooltip"
                   title="{{ link.description }}">
                    {% if link.logo %}
                    <img src="{{ link.logo.url }}" 
                         alt="{{ link.title }}"
                         class="me-3"
                         style="max-height: 30px; width: auto;">
                    {% endif %}
                    <div>
                        
                        {% if link.alias %}
                        <small class="text-muted">{{ link.alias }}</small>
                        {% else %}
                        <span class="d-block">{{ link.title }}</span>
                        {% endif %}
                    </div>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<script>
// 初始化 Bootstrap 工具提示
document.addEventListener('DOMContentLoaded', function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
})
</script>
<style>
    /* 导航链接悬停效果 */
.nav-link {
    transition: all 0.3s ease;
    border-radius: 0.25rem !important;
}

/* 活动标签样式 */
.nav-tabs .nav-link.active {
    background-color: #f8f9fa;
    border-bottom-color: #f8f9fa;
}

/* 链接项悬停效果 */
.tab-content .nav-link:not(.active):hover {
    background-color: rgba(0,0,0,0.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .tab-content .nav-link {
        flex-direction: column;
        text-align: center;
    }
    
    .tab-content img {
        margin-bottom: 0.5rem;
    }
}
.tooltip-inner {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    border-radius: 8px;  /* 可选：修改圆角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 可选：添加阴影 */
  }
  
  .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #2c3e50 !important;
  }
  .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #2c3e50 !important;
  }
  .tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #2c3e50 !important;
  }
  .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #2c3e50 !important;
  }
  .tooltip-inner {
    font-size: 0.9rem;    /* 文字大小 */
    padding: 0.5rem 1rem; /* 内边距 */
    max-width: 300px;     /* 最大宽度 */
  }
    

</style>
