{% macro entity_menu() %}

    {# Prepare #}
    {# Render #}
    <div class="ui left icon mini search input">
        <input type="text" placeholder="Search entity...">
        <i class="search icon"></i>
    </div>
    <div class="item seperator"></div>
    {% if global.settings.showStatus %}
        <a class="pointing browse item">
            States
            <i class="dropdown icon"></i>
        </a>
        <div class="ui flowing basic state popup">
            <div class="ui three column relaxed divided grid">
                {% for status in global.settings.status %}
                    <div class="column">
                        <h4 class="ui header">status</h4>
                        <div class="ui mini link {{ status }} list">
                            <a class="item selected">None</a>
                            <a class="item selected">Progress</a>
                            <a class="item selected">Review</a>
                            <a class="item selected">Done</a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

{% endmacro %}


{% macro entity_card(model) %}

    {# Prepare #}
    {% set examplesCount = 0 %}
    {% if model.id.category and model.id.category.longName == 'Page' %}
        {% set examplesCount = 1 %}
    {% else %}
        {% set examplesCount = model.documentation.getByContentKind(ContentKind.EXAMPLE)|length %}
    {% endif %}
    {% set state = model.properties.get('state') %}
    {% set documentation = model.properties.get('documentation') %}

    {# Render #}
    <div class="entity type-{{ model.id.category.shortName }}">
        <div class="ui raised card">
            <div class="content">
                <div class="header">{{ model.idString }}</div>
                <div class="description">{{ model.documentation.getFirstByType(DocumentationType.TEXT).description|markdown }}</div>
            </div>
            {% if global.settings.showExtends %}
                {% if model.lintResults.success == false %}
                    <div class="ui modal" id="card-{{ model.idString }}-modal">
                        <i class="close icon"></i>
                        <div class="header">
                            Linting Results
                        </div>
                        <div class="content">
                            <div class="ui pointing secondary menu">
                                {% set tabActive = 'active' %}
                                {% for lintResult in model.lintResults %}
                                    {% if lintResult.success == false %}
                                        <a class="item {{ tabActive }}" data-tab="tab-{{ model.idString }}-{{ lintResult.contentKind }}">{{ lintResult.contentKind }}</a>
                                        {% set tabActive = '' %}
                                    {% endif %}
                                {% endfor %}
                            </div>
                            {% set tabActive = 'active' %}
                            {% for lintResult in model.lintResults %}
                                {% if lintResult.success == false %}
                                    <div class="ui {{ tabActive }} tab" data-tab="tab-{{ model.idString }}-{{ lintResult.contentKind }}" style="padding: 10px 20px 20px 20px;">
                                        <div class="ui relaxed divided list">
                                        {% for message in lintResult.messages %}
                                            <div class="item">
                                                <i class="large exclamation {{ 'circle' if lintResult.severity else 'triangle' }} middle aligned icon"></i>
                                                <div class="content">
                                                    <a class="header">{{ message.message }}</a>
                                                    <div class="description">{{ message.filename }}@{{ message.line }}</div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                        </div>
                                    </div>
                                    {% set tabActive = '' %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
                <div class="extends content">
                    {% set cssLinting = 'grey' %}
                    {% set jsLinting = 'grey' %}
                    {% set macroLinting = 'grey' %}
                    {% for lintResult in model.lintResults %}
                        {% if lintResult.contentKind == ContentKind.CSS %}
                            {% set cssLinting = 'green' if lintResult.success else 'red' %}
                        {% endif %}
                        {% if lintResult.contentKind == ContentKind.JS %}
                            {% set jsLinting = 'green' if lintResult.success else 'red' %}
                        {% endif %}
                        {% if lintResult.contentKind == ContentKind.MACRO %}
                            {% set macroLinting = 'green' if lintResult.success else 'red' %}
                        {% endif %}
                    {% endfor %}
                    <span {% if model.lintResults.successForKind(ContentKind.CSS) == false %}data-modal-id="card-{{ model.idString }}-modal" {% endif %}class="ui {{ cssLinting if model.hasOwnContentOfKind(ContentKind.CSS) else 'light-grey' }} mini label">css</span>
                    <span {% if model.lintResults.successForKind(ContentKind.JS) == false %}data-modal-id="card-{{ model.idString }}-modal" {% endif %}class="ui {{ jsLinting if model.hasOwnContentOfKind(ContentKind.JS) else 'light-grey' }} mini label">js</span>
                    <span {% if model.lintResults.successForKind(ContentKind.MACRO) == false %}data-modal-id="card-{{ model.idString }}-modal" {% endif %}class="ui {{ macroLinting if model.hasOwnContentOfKind(ContentKind.MACRO) else 'light-grey' }} mini label">macro</span>
                </div>
            {% endif %}
            {% if global.settings.showStatus %}
                <div class="states content">
                    {% for status in global.settings.status %}
                        {% set name = status.value|default(status)|default('none')|lower %}
                        {% set label = status.label|default(status)|default('None') %}
                        {% set value = state|get(name)|default('None')|lower %}
                        <div class="state state-{{ name }} {{ value }}">
                            <span class="name">{{ label }}</span>
                            <span class="value">{{ value }}</span>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
            <div class="buttons content">
                {% if documentation and documentation.confluence %}
                    <a href="{{ documentation.confluence }}" target="_blank" class="ui compact mini button">Docs</a>
                {% else %}
                    <a href="{{ global.urls.resolveEntityId(model.id, '/documentation') }}" class="ui compact mini button">Docs</a>
                {% endif %}
                {% if examplesCount > 0 %}
                    <a href="{{ global.urls.resolveEntityId(model.id, '/examples') }}" class="ui compact mini blue button">{{ 'Show' if model.id.category.type == 'page' else 'Examples' }}</a>
                {% endif %}
            </div>
        </div>
    </div>

{% endmacro %}


{% macro entity_category(model) %}

    {# Prepare #}
    {% set entities = global.entities.getBySiteAndCategory(global.location.site, model) %}

    {# Render #}
    {% if entities.length > 0 %}
        <div class="entitycategory">
            <div class="ui large header">{{ model.pluralName }}</div>
            <div class="items">
                {% for entity in entities %}
                    {{ entity_card(model=entity) }}
                {% endfor %}
            </div>
        </div>
    {% endif %}

{% endmacro %}