{% extends 'generic/object.html' %}
{% load helpers %}
{% load plugins %}

{% block breadcrumbs %}
<li class="breadcrumb-item"><a href="{% url 'plugins:netbox_custom_widget:customapiendpoint_list' %}">API Endpoints</a></li>
<li class="breadcrumb-item">{{ object }}</li>
{% endblock breadcrumbs %}

{% block content %}
<div class="row">
    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">API Endpoint</h5>
            <table class="table table-hover attr-table">
                <tr>
                    <th scope="row">Name</th>
                    <td>{{ object.name }}</td>
                </tr>
                <tr>
                    <th scope="row">URL</th>
                    <td><code style="word-break: break-all;">{{ object.url }}</code></td>
                </tr>
                <tr>
                    <th scope="row">Method</th>
                    <td><span class="badge text-bg-cyan">{{ object.http_method }}</span></td>
                </tr>
                <tr>
                    <th scope="row">Display Mode</th>
                    <td>{{ object.get_display_mode_display }}</td>
                </tr>
                <tr>
                    <th scope="row">Refresh Interval</th>
                    <td>{{ object.refresh_interval }}s</td>
                </tr>
                <tr>
                    <th scope="row">SSL Verification</th>
                    <td>{% if object.verify_ssl %}{% checkmark True %}{% else %}{% checkmark False %}{% endif %}</td>
                </tr>
                <tr>
                    <th scope="row">Timeout</th>
                    <td>{{ object.timeout }}s</td>
                </tr>
                <tr>
                    <th scope="row">Link</th>
                    <td>
                        {% if object.link %}
                            <a href="{{ object.link }}" target="_blank" style="word-break: break-all;">{{ object.link }} <i class="mdi mdi-open-in-new"></i></a>
                        {% else %}
                            {{ object.link|placeholder }}
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Description</th>
                    <td>{{ object.description|placeholder }}</td>
                </tr>
            </table>
        </div>

        {% if object.headers %}
        <div class="card">
            <h5 class="card-header">Headers</h5>
            <div class="card-body">
                <pre class="mb-0">{{ object.headers|json }}</pre>
            </div>
        </div>
        {% endif %}

        {% if object.mappings %}
        <div class="card">
            <h5 class="card-header">Field Mappings</h5>
            <div class="card-body">
                <pre class="mb-0">{{ object.mappings|json }}</pre>
            </div>
        </div>
        {% endif %}

        {% include 'inc/panels/custom_fields.html' %}
        {% include 'inc/panels/tags.html' %}
        {% include 'inc/panels/comments.html' %}
    </div>

    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">Live Preview</h5>
            <div class="card-body">
                {% with endpoint=object error=api_result.error %}
                    {% include "netbox_custom_widget/widgets/custom_api_content.html" %}
                {% endwith %}
            </div>
        </div>

        {% plugin_right_page object %}
    </div>
</div>

<div class="row">
    <div class="col col-md-12">
        {% plugin_full_width_page object %}
    </div>
</div>
{% endblock content %}