{% extends "base.html" %}
{% load url %}
{% load static %}

{% block title %}
    {{ object_type|title }} {{ list_type|title }} Options - {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        {% if object_type == object_type_options.ALGORITHM %}
            <li class="breadcrumb-item"><a href="{% url 'components:component-interface-list-algorithms' %}">Interface Options</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ list_type|title }}</li>
        {% else %}
            <li class="breadcrumb-item active" aria-current="page">Interface Options</li>
        {% endif %}
    </ol>
{% endblock %}

{% block content %}
    <h2>{{ object_type|title }} {{ list_type|title }} Options</h2>

    <p>
        {% if object_type == object_type_options.ALGORITHM %}
            Here is a list of the existing options that you can use as {{ list_type|lower }} for your {{ object_type|lower }}.
            You can select multiple options for your {{ object_type|lower }} {{ list_type|lower }}.
            However, the same option cannot be used multiple times, either for input or output for your algorithm. For example,
            if you add option <code>ct-image</code> as an input, you can't add another <code>ct-image</code>
            option as either input or output of your algorithm.
        {% else %}
            Here is a list of the existing options that you can use for your {{ object_type|lower }} {{ list_type|lower }}.
            You can select multiple options for your {{ list_type|lower }}, but the same option cannot be used multiple
            times within one {{ list_type|lower }}.
        {% endif %}
        If an option does not exist for your use case please contact support with the title, description, and kind
        for your new interface option.
    </p>

    <div class="table-responsive">
        <table class="table table-hover table-borderless table-sm" id="interfacesTable">
            <thead class="thead-light">
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Kind</th>
                <th>Slug</th>
                {% if list_type == list_type_options.INPUT %}
                    <th>Your algorithm would read this from</th>
                {% elif list_type == list_type_options.OUTPUT %}
                    <th>Your algorithm would write this to</th>
                {% endif %}
            </tr>
            </thead>
            <tbody>

            {% for interface in object_list %}
                <tr>
                    <td>{{ interface.title }}</td>
                    <td>{{ interface.description }}</td>
                    <td>{{ interface.get_kind_display }}</td>
                    <td><code>{{ interface.slug }}</code></td>
                    {% if list_type == list_type_options.INPUT %}
                        <td>
                            {% if interface.is_image_kind %}
                                <code>/input/{{ interface.relative_path }}{% if interface.relative_path %}/{% endif %}&lt;uuid&gt;.mha</code>
                                or
                                <code>/input/{{ interface.relative_path }}{% if interface.relative_path %}/{% endif %}&lt;uuid&gt;.tif</code>
                            {% else %}
                                <code>/input/{{ interface.relative_path }}</code>
                            {% endif %}
                        </td>
                    {% elif list_type == list_type_options.OUTPUT %}
                        <td>
                            {% if interface.is_image_kind %}
                                <code>/output/{{ interface.relative_path }}{% if interface.relative_path %}/{% endif %}&lt;uuid&gt;.mha</code>
                                or
                                <code>/output/{{ interface.relative_path }}{% if interface.relative_path %}/{% endif %}&lt;uuid&gt;.tif</code>
                            {% else %}
                                <code>/output/{{ interface.relative_path }}</code>
                            {% endif %}
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

{% endblock %}

{% block script %}
    {{ block.super }}

    <script type="module" src="{% static 'components/js/interfaces_table.mjs' %}"></script>

{% endblock %}