{% extends "base.html" %}

{% block title %}Concept Schemes - PyST{% endblock %}

{% block page_header %}
<div class="flex justify-between items-center">
    <div>
        <h1>Concept Schemes</h1>
        <p style="color: var(--text-secondary)">Browse and manage your semantic taxonomies</p>
    </div>
<!--
    <a href="/web/concept_scheme/create/" class="btn-primary opacity-50 cursor-not-allowed" aria-disabled="true">
        <i class="fas fa-plus mr-2"></i>Create New Scheme
    </a>
 -->
    </div>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Concept Schemes Table -->
    <div class="card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y" style="border-color: var(--border-color)">
                <thead style="background-color: var(--nav-bg)">
                    <tr>
                        <th scope="col" class="w-1/3 px-6 py-4 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Label</th>
                        <th scope="col" class="w-2/3 px-6 py-4 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Definition</th>
                        <th scope="col" class="w-24 px-6 py-4 text-right text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y" style="background-color: var(--header-bg); border-color: var(--border-color)">
                    {% for scheme in concept_schemes %}
                    <tr class="transition-colors hover-row">
                        <td class="px-6 py-4">
                            <a href="{{ scheme.url }}">
                                <div class="text-sm font-medium text-primary" style="color: var(--text-secondary)">
                                    {% if scheme.pref_labels|lang(language) %}
                                        {{ scheme.pref_labels|lang(language) }}
                                    {% else %}
                                    <span class="italic" style="color: var(--text-tertiary)">No Concept Scheme label available</span>
                                    {% endif %}
                                </div>
                                {% if scheme.notations %}
                                <div class="text-xs mt-1" style="color: var(--text-secondary)">
                                    <i class="fas fa-hashtag mr-1"></i>{{ scheme.notations[0]['@value'] }}
                                </div>
                                {% endif %}
                            </a>
                        </td>
                        <td class="px-6 py-4">
                            <a href="{{ scheme.url }}">
                                <div class="text-sm line-clamp-2" style="color: var(--text-secondary)">
                                    {% if scheme.definitions|lang(language) %}
                                        {{ scheme.definitions|lang(language)}}
                                    {% else %}
                                        <span class="italic" style="color: var(--text-tertiary)">No definition available</span>
                                    {% endif %}
                                    </div>
                            </a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <a href="{{ scheme.url }}"
                               class="text-primary hover:text-primary-hover inline-flex items-center">
                                <i class="fas fa-eye mr-1"></i>View
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" class="px-6 py-4 text-sm text-center" style="color: var(--text-secondary)">
                            <div class="flex flex-col items-center py-8">
                                <i class="fas fa-folder-open text-3xl mb-2" style="color: var(--text-tertiary)"></i>
                                <p>No concept schemes found.</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.getElementById('language').addEventListener('change', function(e) {
    window.location.href = e.target.value;
});
</script>
{% endblock %}
