{# Copyright (c) 2016, NVIDIA CORPORATION.  All rights reserved. #}

{% from "helper.html" import print_flashes %}

{% extends "layout.html" %}

{% block head %}
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.time_filters.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/angular.min.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/ui-bootstrap-tpls-1.3.2.min.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/ngStorage.min.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.sparkline.min.js', ver=dir_hash) }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/store.js', ver=dir_hash) }}"></script>
<script>
 $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();
 });
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/table_selection.css', ver=dir_hash) }}">
{% with namespace = "/jobs" %}
{% set room = "job_management" %}
{% include 'socketio.html' %}
{% endwith %}
<style>
 body {
     padding-top: 65px;
 }
 span.glyphicon {
     color: grey;
     cursor: pointer;
 }
 span.glyphicon:hover {
     color: black;
 }

 div.progress-line-parent {
     position: relative;
 }
 div.progress-line {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background-color: rgb(51, 122, 183);
 }
</style>
{% endblock %}

{% block content %}
<div class="row" style="margin-bottom: 45px;">
    <h1>Model Store</h1>
</div>
<div id="modelList" class="row" ng-app="modelStore" ng-controller="ModelListController">
    <button type="button" class="btn btn-xs btn-primary" ng-click="get_model_list(1)">Update Model List</button>
    <div ng-show="groups_length==0">
        <h4>
            No models in Model Store
        </h4>
    </div>
    <div ng-hide="groups_length==0" class="well">
        <!-- Filter -->
        <div class="col-md-12">
            <div class="pull-right">
                <form>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
                            <input type="text" class="form-control" placeholder="Filter" ng-model="query">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <table class="table table-bordered table-striped list-group selectable"
               style="word-wrap: break-word"
               width="100%">
            <thead>
                <tr>
                    <th style="width:24px"></th>
                    <th>Name</th>
                    <th>Contributor</th>
                    <th>Affiliate</th>
                    <th>Note</th>
                    <th>Data sets</th>
                    <th>License</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat-start="(key, value) in groups" ng-hide="true"> </tr>
                <!-- group bar -->
                <tr class="unselectable group-bar">
                    <td colspan="7" style="background-color:#cccccc" title="{[ value.base_url ]}">
                        <strong>{[ value.welcome_msg ? value.welcome_msg : value.base_url ]}</strong>
                        <span ng-show="local_error != null">{[ local_error ]}</span>
                    </td>
                </tr>
                <tr ng-repeat="model in value.model_list | filter: query">
                    <td>
                        <span ng-click="download(model.id);"
                              title="Import"
                              class="glyphicon glyphicon-import">
                        </span>
                    </td>
                    <td>
                        <div class="progress-line-parent">
                            {[ model.info.name ]}
                            <div class="progress-line"
                                 ng-style="{width : ( model.progress + '%' ) }">
                            </div>
                        </div>
                    </td>
                    <td>
                        {[ model.info.username ]}
                    </td>
                    <td>
                        <img ng-show="model.aux.logo" ng-src="{[value.base_url+model.dir_name]}/{[model.aux.logo]}" height="30" width="40"/>
                    </td>
                    <td>
                        <div data-toggle="tooltip" title="{[model.info.note]}">
                            {[ model.info.note ]}
                        </div>
                    </td>
                    <td>
                        {[ model.aux.dataset ]}
                    </td>
                    <td ng-show="false">
                        <div>
                            <!-- Trigger the modal with a button -->
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#{[value.id+model.name]}">
                                {[model.info.license ]}
                            </button>
                        </div>
                        <div id="{[value.id+model.name]}" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="modal-title">License</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p> {[model.license_text]} </p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <a ng-show="model.aux.license" href="{[value.base_url+model.dir_name]}/license.txt">{[model.aux.license]}</a>
                    </td>
                </tr>
                <tr ng-repeat-end
                    ng-hide="true">
                </tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}