<div id="related-modal" class="modal elementselectormodal">
    <div id="modal" class="body">
        <header class="header">
            <h3>Related</h3>
        </header>
        <div class="content">
            {% if relations|length %}
                <div class="main">
                    <table class="data fullwidth collapsible">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Type</th>
                            <th data-attribute="link" data-icon="world" title="Link"></th>
                        </tr>
                        </thead>
                        {% for item in relations %}
                            {% set title = item.title ?? item.name ?? item.username ?? null %}
                            {% set status = item.status %}
                            {% set cpEditUrl = item.cpEditUrl ?? '#' %}

                            <tr>
                                <td>
                                    <div class="element hasstatus" data-type="craft\elements\{{ item.formName }}" data-id="{{ item.id }}" data-site-id="{{ item.siteId }}" data-status="{{ status }}" data-label="{{ title }}" data-url="{{ cpEditUrl }}" title="{{ title }}">
                                        <span class="status {{ status }}"></span>
                                        <div class="label">
                                            <span class="title"><a href="{{ cpEditUrl }}" rel="noopener" target="_blank" >{{ title }}</a></span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if item.refHandle == 'entry' and item.section %}
                                        <a href="/admin/entries/{{ item.section.handle }}" rel="noopener" target="_blank">{{ item.section }}</a>
                                    {% elseif item.refHandle == 'category' and item.group %}
                                        <a href="/admin/categories/{{ item.group.handle }}" rel="noopener" target="_blank">{{ item.group }}</a>
                                    {% elseif item.refHandle == 'user' %}
                                        <a href="/admin/users" rel="noopener" target="_blank">{{ item.displayName }}</a>
                                    {% else %}
                                        Unknown
                                    {% endif %}
                                </td>
                                <td>
                                    {% if cpEditUrl %}
                                        <a href="{{ cpEditUrl }}" rel="noopener" target="_blank" data-icon="world"
                                           title="Visit webpage"></a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            {% else %}
                <p class="light h-text--bold">No relations found</p>
            {% endif %}
        </div>
    </div>
    <div class="footer">
        <div class="buttons right">
            <div class="btn" tabindex="0">Cancel</div>
        </div>
    </div>
</div>
