{% extends 'generic/object_detail.html' %}
{% load helpers %}

{% block content_left_page %}
    <style> 
        .table-wrapper{
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }
    </style>

    <div class="panel panel-default">
        <div class="panel-heading">
            <strong>Config Plan Details</strong>
        </div>
        <table class="table table-hover panel-body attr-table table-responsive">
            <tr>
                <td>Device</td>
                <td>{{ object.device|hyperlinked_object }}</td>
            </tr>
            <tr>
                <td>Date Created</td>
                <td>{{ object.created }}</td>
            </tr>
            <tr>
                <td>Plan Type</td>
                <td>{{ object.plan_type|title }}</td>
            </tr>
            <tr>
                <td>Features</td>
                <td>
                    {% if object.feature.exists %}
                        <ul>
                            {% for feature in object.feature.all %}
                                <li><a href="{{ feature.get_absolute_url }}">{{ feature }}</a></li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        {{ None|placeholder }}
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td>Change Control ID</td>
                <td>{{ object.change_control_id|placeholder }}</td>
            </tr>
            <tr>
                <td>Change Control URL</td>
                <td><a href="{{ object.change_control_url }}">{{ object.change_control_url|placeholder }}</a></td>
            </tr>
            <tr>
                <td>Plan Result</td>
                <td>{{ object.plan_result|hyperlinked_object:"status" }}</td>
            </tr>
            <tr>
                <td>Deploy Result</td>
                <td>{{ object.deploy_result|hyperlinked_object:"status"|placeholder }}</a>
                </td>
            </tr>
            <tr>
                <td>Status</td>
                <td>
                    <span class="label" style="color: {{ object.status.color|fgcolor }}; background-color: #{{ object.status.color }}">{{ object.get_status_display }}</span>
                </td>
            </tr>
        </table>
    </div>
{% endblock %}

{% block content_full_width_page %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <strong>Config Set Details</strong>
        </div>
        <table class="table table-hover panel-body attr-table table-responsive table-wrapper">
            <tr>
                <td>Config Set</td>
                <td>
                    <span id="config_set"><pre>{{ object.config_set }}</pre></span>
                    <span class="config_hover_button">
                        <button type="button" class="btn btn-inline btn-default hover_copy_button" data-clipboard-action='copy' data-clipboard-target="#config_set">
                            <span class="mdi mdi-content-copy"></span>
                        </button>
                    </span>
                </td>
            </tr>
        </table>
    </div>
{% endblock %}