{% load static %}
{% load template_tags %}
{% load i18n %}

<div id="menu-panel" class="ep-menu" style="display: none;" data-bind="visible:menuActive()">
    <div class="panel ep-menu-panel relative" style="">

        <!-- Menu List -->
        <div class="panel-body">
            <ul class="list-group ep-menu-list">
                <!-- ko ifnot: ko.unwrap($data.graph.source_identifier_id) -->
                    <!-- Menu Item -->
                    <li class="edit-menu-item">
                        <a href="#", data-bind="click: createDraftGraph">
                            <div class="media-body">
                                <div class="menu-item-title">
                                    <i class="fa fa-pencil-square-o"></i>
                                    <span>{% trans "Draft a Model Update" %}</span>
                                </div>
                                <span class="text-muted menu-item-subtitle">{% trans "Create a draft of the current model for full editing capabilities" %}</span>
                            </div>
                        </a>
                    </li>
                <!-- /ko -->
                <!-- Menu Item -->
                <li class="edit-menu-item">
                    <a href="{% url 'model_history' source_graph_id %}">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-calendar"></i>
                                <span>{% trans "View Model History" %}</span>
                            </div>
                            <span class="text-muted menu-item-subtitle">{% trans "Select the Resource Model version from a list of publications" %}</span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item">
                    <a href="{% url 'graph' '' %}" data-bind="click: newResource">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-sitemap"></i> 
                                <span>{% trans "New Model" %}</span>
                            </div>
                            <span class="text-muted menu-item-subtitle">{% trans "Create new Resource Model" %}</span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item">
                    <a href="{% url 'graph' '' %}" data-bind="click: newBranch">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa ion-merge"></i> 
                                <span>{% trans "New Branch" %}</span>
                            </div>
                            <span class="text-muted menu-item-subtitle">{% trans "Create new Branch" %}</span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item file-upload upload">
                    <form id="data">
                        <input type="file" class="upload" id="fileupload" data-bind="event: {change: importGraph}" accept=".json"/>
                    </form>
                    <a href="{% url 'graph' '' %}" data-bind="click: importButtonClick">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-upload"></i> 
                                <span>{% trans "Import Model" %}</span>
                            </div>
                            <span class="text-muted menu-item-subtitle">{% trans "Import Model by uploading a json file" %}</span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item">
                    <a href="{% url 'graph' '' %}" data-bind="click: cloneGraph">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-clone"></i>
                                <span data-bind="text: graph.isresource() ? ' ' + {% quoted_trans _("Clone Model") %} : ' ' + {% quoted_trans _("Clone Branch") %}"></span>
                            </div>
                            <span 
                                class="text-muted menu-item-subtitle" 
                                data-bind="text: graph.isresource() ? {% quoted_trans _("Clone the existing Resource Model") %} : {% quoted_trans _("Clone the existing Branch") %}"
                            ></span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item">
                    <a href="{% url 'graph' '' %}" data-bind="click: exportGraph">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-download"></i>
                                <span data-bind="text: graph.isresource() ? ' ' + {% quoted_trans _("Export Model") %} : ' ' + {% quoted_trans _("Export Branch") %}"></span>
                            </div>
                            <span 
                                class="text-muted menu-item-subtitle" 
                                data-bind="text: graph.isresource() ? {% quoted_trans _("Export the existing Resource Model") %} : {% quoted_trans _("Export the existing Branch") %}"
                            ></span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item" data-bind="visible: graph.isresource">
                    <a href="{% url 'function_manager' source_graph_id %}" data-bind="click:function () { navigate('{% url 'function_manager' source_graph_id %}'); }">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-code"></i> 
                                <span>{% trans "Functions" %}</span>
                            </div>
                            <span class="text-muted menu-item-subtitle">{% trans "Configure functions attached to this Resource Model" %}</span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item" data-bind="visible: graph.isresource">
                    <a data-bind="click: exportMappingFile">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-download"></i> 
                                <span>{% trans "Export Mapping File" %}</span>
                            </div>
                            <span class="text-muted menu-item-subtitle">{% trans "Use a mapping file with import/export of business data" %}</span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item" data-bind="visible: graph.isresource">
                    <a href="{% url 'graph' '' %}" data-bind="click: deleteInstances">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-trash"></i> 
                                <span>{% trans "Delete Associated Instances" %}</span>
                            </div>
                            <span class="text-muted menu-item-subtitle">{% trans "Delete All Associated Instances with this Model" %}</span>
                        </div>
                    </a>
                </li>
                <!-- Menu Item -->
                <li class="edit-menu-item">
                    <a href="{% url 'graph' '' %}" data-bind="click: deleteGraph">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-trash"></i>
                                <span data-bind="text: graph.isresource() ? ' ' + {% quoted_trans _("Delete Model") %} : ' ' + {% quoted_trans _("Delete Branch") %}"></span>
                            </div>
                            <span 
                                class="text-muted menu-item-subtitle" 
                                data-bind="text: graph.isresource() ? {% quoted_trans _("Delete the existing Resource Model") %} : {% quoted_trans _("Delete the existing Branch") %}"
                            ></span>
                        </div>
                    </a>
                </li>

                <!-- Menu Item -->
                <li class="edit-menu-item">
                    <a href="{% url 'graph' '' %}" data-bind="click:function () { navigate('{% url 'graph' '' %}') }">
                        <div class="media-body">
                            <div class="menu-item-title">
                                <i class="fa fa-tag"></i> 
                                <span>{% trans "Return to Arches Designer" %}</span>
                            </div>
                            <span class="text-muted menu-item-subtitle">{% trans "Create Arches Resource Models and Branches" %}</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="panel-footer ep-menu-footer hidden">{% trans "footer" %}</div>
    </div>
</div>
