{% extends 'generic/object_retrieve.html' %}
{% load helpers %}
{% load static %}

{% block title %}{{ object }}{% endblock %}

{% block header %}
    <div class="row noprint">
        <div class="col-sm-8 col-md-9">
            <ol class="breadcrumb">
                <li><a href="{% url 'extras:objectchange_list' %}">Change Log</a></li>
                {% if object.related_object.get_absolute_url %}
                    <li><a href="{{ object.related_object.get_absolute_url }}changelog/">{{ object.related_object }}</a></li>
                {% elif object.changed_object and object.changed_object.get_absolute_url %}
                    <li><a href="{{ object.changed_object.get_absolute_url }}changelog/">{{ object.changed_object }}</a></li>
                {% elif object.changed_object is not None %}
                    <li>{{ object.changed_object }}</li>
                {% endif %}
                <li>{{ object }}</li>
            </ol>
        </div>
        <div class="col-sm-4 col-md-3">
            <form action="{% url 'extras:objectchange_list' %}" method="get">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search change logs" />
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-primary">
                            <span class="mdi mdi-magnify" aria-hidden="true"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Change</strong>
                </div>
                <table class="table table-hover panel-body attr-table">
                    <tr>
                        <td>Time</td>
                        <td>
                            {{ object.time }}
                        </td>
                    </tr>
                    <tr>
                        <td>User</td>
                        <td>
                            {{ object.user|default:object.user_name }}
                        </td>
                    </tr>
                    <tr>
                        <td>Action</td>
                        <td>
                            {{ object.get_action_display }}
                        </td>
                    </tr>
                    <tr>
                        <td>Object Type</td>
                        <td>
                            {{ object.changed_object_type }}
                        </td>
                    </tr>
                    <tr>
                        <td>Object</td>
                        <td>
                            {% if object.changed_object and object.changed_object.get_absolute_url %}
                                {{ object.changed_object|hyperlinked_object }}
                            {% else %}
                                {{ object.object_repr }}
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <td>Request ID</td>
                        <td>
                            {{ object.request_id }}
                        </td>
                    </tr>
                    <tr>
                        <td>Change Context</td>
                        <td>
                            {{ object.get_change_context_display }}
                        </td>
                    </tr>
                    <tr>
                        <td>Change Context Detail</td>
                        <td>
                            {{ object.change_context_detail | placeholder }}
                        </td>
                    </tr>
                </table>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Object Data</strong>
                </div>
                <div class="panel-body">
                    <div class="editor-container"
                         data-lang="json"
                         data-value="{{ object.object_data|render_json:False }}"
                         style="max-height: 300px">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-7">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Difference</strong>
                    <div class="btn-group btn-group-xs pull-right noprint">
                        <a {% if prev_change %}href="{% url 'extras:objectchange' pk=prev_change.pk %}"{% else %}disabled{% endif %} class="btn btn-default">
                            <span class="mdi mdi-chevron-left" aria-hidden="true"></span> Previous
                        </a>
                        <a {% if next_change %}href="{% url 'extras:objectchange' pk=next_change.pk %}"{% else %}disabled{% endif %} class="btn btn-default">
                            Next <span class="mdi mdi-chevron-right" aria-hidden="true"></span>
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    {% if diff_added == diff_removed %}
                        <span class="text-muted" style="margin-left: 10px;">
                            {% if object.action == 'create' %}
                                Object created
                            {% elif object.action == 'delete' %}
                                Object deleted
                            {% else %}
                                No changes
                            {% endif %}
                        </span>
                    {% else %}
                        <div class="editor-container"
                             data-mode="diff"
                             data-original="{{ diff_removed | render_json:False }}"
                             data-modified="{{ diff_added | render_json:False }}"
                             data-lang="json"
                             style="max-height: 730px">
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            {% include 'panel_table.html' with table=related_changes_table heading='Related Changes' panel_class='default' %}
            {% if related_changes_count > related_changes_table.rows|length %}
                <div class="pull-right">
                    <a href="{% url 'extras:objectchange_list' %}?request_id={{ object.request_id }}" class="btn btn-primary">See all {{ related_changes_count|add:"1" }} changes</a>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ block.super }}
    <script src="{% static 'js/editor.js' %}"></script>
{% endblock %}

