{% load i18n %}
<div id="resource_data_management_form" class="right-inner arches-box-grey-border padding-10">
    <div id="edit-history">
        <!-- Theme Title -->
        <div class="row">
            <div class="col-xs-12">
                
                <div class="headline margin-bottom-10 padding-left-10">
                    <h3 class="headline text-primary"><i class="fa fa-step-backward text-primary"></i>Edit History</h3>

                    <!-- Scheme Tools for larger screens -->
                    <div class="btn-group pull-right hidden-xs">
                        <button type="button" class="btn btn-primary arches-RDM-button" name="morehistory"><i class="fa fa-arrow-down"></i>
                            More &nbsp;
                            <!-- <i class="fa fa-chevron-down"></i>
                            <span class="sr-only">Toggle Dropdown</span>    -->                         
                        </button>
 <!--                        <ul class="dropdown-menu" role="menu">
                            <li><a href="" data-toggle="">Look forward in time </a></li>
                            <li><a href="" data-toggle="">Look back in time </a></li>
                            <li class="divider"></li>
                            <li><a href="#">Close</a></li>
                        </ul> -->
                    </div>

                </div>
            </div>
        </div>
        <!-- End Theme Title -->


        <!-- Edit Timeline  -->
        <div class="row margin-bottom-10">
            <div class="col-xs-12">
        
                <!-- Timeline Content -->
                <div class="arches-timeline" style="display: none;" data-bind="visible: true">
                    <ul class="arches-timeline-list" data-bind="foreach: history">
                        <li>
                            <!-- Timeline Date/TIme -->
                            <div class="arches-timeline-date">
                                <span data-bind="text: date"></span><span class="arches-timeline-time" data-bind="text: time"></span>
                            </div>

                            <!-- Timeline Content -->
                            <div class="arches-timeline-content" data-bind="foreach: log">
                            
                                <!-- Description -->
                                <p class="arches-timeline-description">
                                    <dl>
                                        <!-- Timeline Icon -->
                                        <div data-bind="if: (edittype() === 'create' && $index() === 0)">
                                            <div class="arches-timeline-icon">
                                                <i class="fa fa fa-check"></i>
                                            </div>

                                            <p class="arches-timeline-content-title">
                                                {% trans "Resource Record Created" %}
                                            </p>

                                            <p class="arches-timeline-description">
                                                {% trans "Record created by Arches with reference number" %} <strong data-bind="text: resourceid"></strong>
                                            </p>
                                        </div>

                                        <!-- Timeline Icon -->
                                        <div data-bind="if: edittype() === 'update'">
                                            <div class="arches-timeline-icon edited">
                                                <i class="fa fa-pencil"></i>
                                            </div>

                                            <dd class="arches-timeline-description">
                                                <strong data-bind="text: attributeentitytypeid"></strong> {% trans "record updated" %}
                                            </dd>

                                            <dd class="arches-timeline-description">
                                                {% trans "Previous value:" %} {% autoescape off %}<span data-bind="html: oldvalue"></span>{% endautoescape %}
                                            </dd>

                                            <dd class="arches-timeline-description">
                                                {% trans "Updated value:" %} {% autoescape off %}<span data-bind="html: newvalue"></span>{% endautoescape %}
                                            </dd>
                                        </div>

                                        <!-- Timeline Icon -->
                                        <div data-bind="if: edittype() === 'insert'">
                                            <div class="arches-timeline-icon added">
                                                <i class="fa fa-plus"></i>
                                            </div>

                                            <dd class="arches-timeline-description">
                                                <strong data-bind="text: attributeentitytypeid"></strong> {% trans "record added" %}
                                            </dd>

                                            <dd class="arches-timeline-description">
                                                {% trans "New value:" %} {% autoescape off %}<span data-bind="html: newvalue"></span>{% endautoescape %}
                                            </dd>
                                        </div>

                                        <!-- Timeline Icon -->
                                        <div data-bind="if: edittype() === 'create'">
                                            <div class="arches-timeline-icon added">
                                                <i class="fa fa-plus"></i>
                                            </div>

                                            <dd class="arches-timeline-description">
                                                <strong data-bind="text: attributeentitytypeid"></strong> {% trans "record added" %}
                                            </dd>

                                            <dd class="arches-timeline-description">
                                                {% trans "New value:" %} {% autoescape off %}<span data-bind="html: newvalue"></span>{% endautoescape %}
                                            </dd>
                                        </div>

                                        <!-- Timeline Icon -->
                                        <div data-bind="if: edittype() === 'delete'">
                                            <div class="arches-timeline-icon deleted">
                                                <i class="fa fa-minus"></i>
                                            </div>

                                            <dd class="arches-timeline-description">
                                                <strong data-bind="text: attributeentitytypeid"></strong> {% trans "record deleted" %}
                                            </dd>

                                            <dd class="arches-timeline-description">
                                                {% trans "Value:" %} {% autoescape off %}<span data-bind="html: oldvalue"></span>{% endautoescape %}
                                            </dd>
                                        </div>
                                    </dl>

                                    <div data-bind="if: ($parent.log().length - 1 === $index())">
                                        <p class="arches-timeline-editor">
                                            {% trans "Edited by:" %} <a href="javascript:void(0);" data-bind="text: (user_firstname() + ' ' + user_lastname())"></a><span data-bind="if: user_email">(<span data-bind="text: user_email()"></span>)</span>
                                        </p>  
                                    </div>

                                </p>
                            </div>

                        </li>

                    </ul>
                        
                </div>
                <!-- END Timeline Content -->

                <!-- Page  -->
                <div class="text-center margin-top-20">
                    <a href="javascript:void(0)" class="btn btn-sm btn-default btn-primary" name="morehistory"><i class="fa fa-arrow-down" style="padding-right:4px;"></i>LOAD MORE</a>
                </div>

            </div>
        </div>

        <!-- End CRUD Container -->
        
        <div class="clearfix margin-bottom-10"></div>

    </div>
</div>