{% extends "layout.html" %}

{% block sidebar %}
{%- let active_section = active_section %}
{% include "components/sidebar.html" %}
{% endblock %}

{% block main_content %}
{% include "components/metadata_card.html" %}
<section id="namespaces">
    {%- let id = "namespaces" %}
    {%- let title = "Namespaces" %}
    {%- let count = Some(namespaces.len()) %}
    {%- let description = Some("Namespace prefixes used in this ontology.") %}
    {% include "components/section_header.html" %}
    {% include "components/namespace_table.html" %}
</section>

<section id="classes">
    {%- let id = "classes" %}
    {%- let title = "Classes" %}
    {%- let count = Some(classes.len()) %}
    {%- let description = Some("Classes defined in this ontology.") %}
    {% include "components/section_header.html" %}
{%- if classes.is_empty() %}
    <p class="placeholder-text">No classes defined in this ontology.</p>
{%- else %}
    <div class="entity-list">
{%- for class in classes %}
        <a href="#class-{{ class.id }}" class="entity-link class-link">{{ class.label }}</a>
{%- endfor %}
    </div>
    <div class="class-cards">
{%- for class in class_data %}
        {%- let id = class.id.as_str() %}
        {%- let label = class.label.as_str() %}
        {%- let iri = class.iri.as_str() %}
        {%- let description = class.description.as_deref() %}
        {%- let superclass = class.superclass.as_ref() %}
        {%- let subclasses = class.subclasses.as_slice() %}
        {%- let properties = empty_properties %}
        {% include "components/class_card.html" %}
{%- endfor %}
    </div>
{%- endif %}
</section>

<section id="properties">
    {%- let id = "properties" %}
    {%- let title = "Properties" %}
    {%- let count = Some(properties.len()) %}
    {%- let description = Some("Properties defined in this ontology.") %}
    {% include "components/section_header.html" %}
{%- if properties.is_empty() %}
    <p class="placeholder-text">No properties defined in this ontology.</p>
{%- else %}
    <div class="entity-list">
{%- for prop in properties %}
        <a href="#prop-{{ prop.id }}" class="entity-link prop-link">{{ prop.label }}</a>
{%- endfor %}
    </div>
    <div class="property-cards">
{%- for prop in property_data %}
        {%- let id = prop.id.as_str() %}
        {%- let label = prop.label.as_str() %}
        {%- let iri = prop.iri.as_str() %}
        {%- let property_type = prop.property_type.as_str() %}
        {%- let description = prop.description.as_deref() %}
        {%- let domain = prop.domain.as_ref() %}
        {%- let range = prop.range.as_ref() %}
        {%- let characteristics = prop.characteristics.as_slice() %}
        {% include "components/property_card.html" %}
{%- endfor %}
    </div>
{%- endif %}
</section>

<section id="individuals">
    {%- let id = "individuals" %}
    {%- let title = "Individuals" %}
    {%- let count = Some(individuals.len()) %}
    {%- let description = Some("Named individuals defined in this ontology.") %}
    {% include "components/section_header.html" %}
{%- if individuals.is_empty() %}
    <p class="placeholder-text">No individuals defined in this ontology.</p>
{%- else %}
    <div class="entity-list">
{%- for ind in individuals %}
        <a href="#ind-{{ ind.id }}" class="entity-link individual-link">{{ ind.label }}</a>
{%- endfor %}
    </div>
    <div class="individual-cards">
{%- for ind in individual_data %}
        {%- let id = ind.id.as_str() %}
        {%- let label = ind.label.as_str() %}
        {%- let iri = ind.iri.as_str() %}
        {%- let description = ind.description.as_deref() %}
        {%- let types = ind.types.as_slice() %}
        {%- let property_values = ind.property_values.as_slice() %}
        {% include "components/individual_card.html" %}
{%- endfor %}
    </div>
{%- endif %}
</section>
{% endblock %}

{% block page_styles %}
<style>
    .placeholder-text {
        color: var(--color-text-muted);
        font-style: italic;
        padding: var(--space-4);
        background-color: var(--color-bg-secondary);
        border-radius: var(--radius-md);
        text-align: center;
    }

    .entity-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .entity-link {
        display: inline-flex;
        align-items: center;
        padding: var(--space-2) var(--space-3);
        background-color: var(--color-bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        transition: all var(--transition-fast);
    }

    .entity-link:hover {
        text-decoration: none;
        border-color: var(--color-primary);
        box-shadow: var(--shadow-sm);
    }

    .class-link {
        color: var(--color-class);
    }

    .class-link:hover {
        background-color: color-mix(in srgb, var(--color-class) 10%, transparent);
    }

    .prop-link {
        color: var(--color-property);
    }

    .prop-link:hover {
        background-color: color-mix(in srgb, var(--color-property) 10%, transparent);
    }

    .class-cards {
        margin-top: var(--space-6);
    }

    .individual-link {
        color: var(--color-individual);
    }

    .individual-link:hover {
        background-color: color-mix(in srgb, var(--color-individual) 10%, transparent);
    }

    .property-cards {
        margin-top: var(--space-6);
    }

    .individual-cards {
        margin-top: var(--space-6);
    }
</style>
{% endblock %}