{% extends 'dashboard/base.html' %}

{% block title %}Sigma{% endblock title %}
{% block name %}Newsfeed{% endblock name %}

{% block style %}
<style>
select {
    text-align-last:center;
}
.pageheader-title {
    align-self: center;
    margin-bottom: 0px;
}
</style>
{% endblock style %}

{% block scripts %}
{{super()}}
<script>
var transactions = {{week_transactions|tojson|safe}};
</script>

<script>

function thought() {
    $.get("/category/transact", {
        name: "Thot",
        target: current_user.id,
        delta_source: 0,
        delta_target: 1,
        description: $("#input-text").val()
    }, function(data) {
        toastr.success("Thot shared");
        setTimeout(onChange, 2000);
    }).fail(function( jqXHR, textStatus, errorThrown ) {
        toastr.error(jqXHR.responseText);
    });
}

function showFeed() {
    var feed = $("#feed");
    feed.html("");
    for (var i = 0; i < amount && i < transactions.length; i++) {
        var course = transactions[i];
        // We only know how to display:
        // One of source or target deltas is 0
        // source and target deltas are negatives of each other
        /*if (tx.delta_source != 0 && tx.delta_target != 0 && tx.delta_source != -tx.delta_target) {
            continue;
        }*/
        var cardColor = "positive-card";//tx.category == "Thot" ? "thought-card" : tx.delta_target >= 0 ? "positive-card" : "negative-card";
        var row = $("<div>", {class: "row"});
        var col = $("<div>", {class: "col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12"});
        var card = $("<div>", {class: "card thin-card-container " + cardColor});
        var cardHeader = $("<div>", {class: "card-header thin-card"});
        var cardBody = $("<div>", {class: "card-body thin-card"});

        cardHeader.text(course["course_id"] + " " + course["course_name"] + " | " + " \u2192 ");
        cardBody.text(course["course_description"]);

        card.append(cardHeader);
        if (course["course_description"] != "") {
            card.append(cardBody);
        }
        col.append(card);
        row.append(col);
        feed.append(row);
    }
}

function init() {
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-bottom-center",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "3000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut",
        "escapeHtml": true
    };
    showFeed();
    toastr.success("test");
}

$(document).ready(init);
</script>
{% endblock scripts %}

{% block content %}
<div class="dashboard-wrapper">
    <div class="dashboard-ecommerce">
        <div class="container-fluid dashboard-content">
        <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="card thin-card-container" style="margin-bottom: 10px">
                        <h5 class="card-header thin-card">Share a Thot</h5>
                        <div class="card-body thin-card">
                            <form onsubmit="thought(); return false;">
                                <div class="form-group" style="margin-bottom: 0px">
                                    <label>My thot</label>
                                    <input type="text" class="form-control" id="input-text">
                                    <div style="height:10px"></div>
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">Share</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="page-header" style="display:flex; justify-content: space-between">
                        <h2 class="pageheader-title">Courses</h2>
                        <select class="form-control" id="num-show" onchange="showFeed();" style="max-width:150px;">
                            <!--<option value="100">Weekly 100</option>
                            <option value="500">Weekly 500</option>
                            <option value="1000000000">1 Week</option>
                            <option value="-1">1 Month</option>
                            <option value="-2">Everything</option>-->
                        </select>
                    </div>
                </div>
            </div>
            <div id="feed"></div>
            <!-- ============================================================== -->
            <!-- end pageheader  -->
            <!-- ============================================================== -->

        </div>
    </div>
</div>
{% endblock content %}