{% extends "base.html" %}
{%from "oauth2/display_error.html" import display_error%}
{% block title %}Your Collections{% endblock %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('js', filename='DataTablesExtensions/buttonsBootstrap/css/buttons.bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
    <link rel="stylesheet" type="text/css" href="/static/new/css/trait_list.css" />
{% endblock %}
{% block content %}
<!-- Start of body -->
    <div class="container">
      {{flash_me()}}

      {% if g.user_session.logged_in %}
        <h1>Collections owned by {% if g.user_session.user_name %}{{ g.user_session.user_name }}{% else %}{{ g.user_session.user_email }} {% endif %}</h1>
        {% else %}
        <h1>Your Collections</h1>
        {% endif %}

        <div class="tool-button-container">
            <button class="btn btn-default" id="select_all"><span class="glyphicon glyphicon-ok"></span> Select All</button>
            <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
            <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
            <button class="btn btn-danger" id="remove_collections" data-url="/collections/delete">Remove Collections</button>
            <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
            <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
            <br>
            <form id="collections_form" action="javascript:void(0);" method="post" enctype="multipart/form-data">
                <input type="hidden" name="uc_id" id="uc_id" value="" />
                <div style="margin-top: 10px; display: inline-block;"><button class="btn btn-default" id="import_collection" data-url="/collections/import"> Import Collection</button>  <input type="file" name="import_file" id="import_file" size="20" style="display: inline-block;"></input></div>
            </form>
        </div>
        <br>
        <div id="collections_list" style="width: 800px;">
	  {%if anon_collections_error is defined%}
	  {{display_error("Anonymous Collections", anon_collections_error)}}
	  {%endif%}
	  {%if anon_collections | length > 0%}
	  <table class="table-hover table-striped cell-border" id='anon_trait_table'
		 style="float: left;">
	    <caption>Anonymous Collections</caption>
            <thead>
              <tr>
                <th></th>
                <th>Index</th>
                <th>Name</th>
                <th>Created</th>
                <th>Last Changed</th>
                <th># Records</th>
              </tr>
            </thead>

            <tbody>
              {% for uc in anon_collections %}
              <tr class="collection_line">
                <td align="center" style="padding: 0px;"><INPUT TYPE="checkbox" NAME="collection" class="checkbox trait_checkbox" VALUE="{{ uc.id }}"></td>
                <td align="right">{{ loop.index }}
                <td><a class="collection_name" href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td>
                <td>{{ uc.created_timestamp }}</td>
                <td>{{ uc.changed_timestamp }}</td>
                <td align="right">{{ uc.num_members }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
	  {%endif%}
	  {% if collections|length > 0 %}
      {% if (anon_collections | length > 0)  and (collections | length > 0) %}
	  <hr />
	  {%endif%}
          <table class="table-hover table-striped cell-border" id='trait_table' style="float: left;">
	    <caption>User Collections</caption>
            <thead>
                <tr>
                    <th></th>
                    <th>Index</th>
                    <th>Name</th>
                    <th>Created</th>
                    <th>Last Changed</th>
                    <th># Records</th>
                </tr>
            </thead>

            <tbody>
            {% for uc in collections %}
            <tr class="collection_line">
              <td align="center" style="padding: 0px;"><INPUT TYPE="checkbox" NAME="collection" class="checkbox trait_checkbox" VALUE="{{ uc.id }}"></td>
              <td align="right">{{ loop.index }}
              <td><a class="collection_name" href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td>
              <td>{{ uc.created_timestamp }}</td>
              <td>{{ uc.changed_timestamp }}</td>
              <td align="right">{{ uc.num_members }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        {% endif %}
        {% if (anon_collections | length < 1)  and (collections | length < 1) %}
        You have no collections yet.
        {% endif %}
        </div>
    </div>

<!-- End of body -->

{% endblock %}

{% block js %}
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/timeago.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='js_alt/md5.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jszip/jszip.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/plugins/sorting/natural.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTablesExtensions/buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type="text/javascript" src="/static/new/javascript/search_results.js"></script>
    <script type="text/javascript" src="/static/new/javascript/table_functions.js"></script>
    <script type="text/javascript" src="/static/new/javascript/create_datatable.js"></script>
    <script>
        $(document).ready( function () {
            tableId = "trait_table";

            columnDefs = [
                { "type": "natural", "width": "3%", "targets": 0, "orderable": false},
                { "type": "natural", "width": "8%", "targets": 1},
                { "type": "natural", "width": "20%", "targets": 2},
                { "type": "natural", "width": "25%", "targets": 3},
                { "type": "natural", "width": "25%", "targets": 4},
                { "type": "natural", "width": "15%", "targets": 5}
            ];

	    create_table("anon_trait_table", [], columnDefs)
            create_table(tableId, [], columnDefs)

            submit_special = function(url) {
                $("#collections_form").attr("action", url);
                return $("#collections_form").submit();
            };

            add_collection = function(trait_data, textStatus, jqXHR) {
                var traits_hash = md5(trait_data.toString());

                $.ajax({
                    type: "POST",
                    url: "/collections/store_trait_list",
                    data: {
                        hash: traits_hash,
                        traits: trait_data.toString()
                    }
                });

                return $.colorbox({
                    href: "/collections/add?hash=" + traits_hash
                });
            }

            $("#import_collection").on("click", function() {
                var fd = new FormData();
                var files = $('#import_file')[0].files;
                if(files.length > 0){
                    fd.append('import_file', files[0])
                    $.ajax({
                        type: "POST",
                        url: "/collections/import",
                        data: fd,
                        dataType: "json",
                        contentType: false,
                        processData: false,
                        success: add_collection
                    });
                } else {
                    alert("No file selected")
                }
            });


            $("#remove_collections").on("click", function() {
                url = $(this).data("url")
                collections = []
                $(".trait_checkbox:checked").each(function() {
                    collections.push($(this).val());
                });
                collections_string = collections.join(":")
                $("input[name=uc_id]").val(collections_string)
                return submit_special(url)
            });

        });

    </script>
{% endblock %}