{% extends "base.html" %} {% load static %} {% block header %} {% endblock %} {% block content %}
<section class="container" id="root">
    <div class="columns">

        <div class="column is-8">
            <div class="box content">
                <article class="post">
                    <h4>Learning Curve</h4>
                    <div class="media">
                        <div class="media-content">
                            <div class="content">
                                <canvas id="myChart"></canvas>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>

        <div class="column is-4">
            <div class="box content">
                <article class="post">
                    <h4>Stats</h4>
                    <div class="media">
                        <div class="media-content">
                            <div class="content">
                                <canvas id="myPie"></canvas>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>

    <div class="columns" style="margin-top:-1rem;">
        <div class="column is-8">
            <div class="box content">
                <article class="post">
                    <h4>Label Management</h4>
                    <div class="media">
                        <div class="media-content">
                            <div class="content">

                                    <div class="field is-horizontal">
                                            <div class="field-label is-normal">
                                              <label class="label">Label name</label>
                                            </div>
                                            <div class="field-body">
                                              <div class="field">
                                                <p class="control is-expanded has-icons-left">
                                                  <input class="input" type="text" placeholder="Label name" required>
                                                  <span class="icon is-small is-left">
                                                    <i class="fas fa-tag"></i>
                                                  </span>
                                                </p>
                                              </div>
                                            </div>
                                          </div>
                                          
                                          <div class="field is-horizontal">
                                            <div class="field-label is-normal">
                                              <label class="label">Shortcut</label>
                                            </div>
                                            <div class="field-body">
                                              <div class="field is-narrow">
                                                <div class="control">
                                                  <div class="select is-fullwidth">
                                                    <select>
                                                      <option>Business development</option>
                                                      <option>Marketing</option>
                                                      <option>Sales</option>
                                                    </select>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>

                                          <div class="field is-horizontal">
                                            <div class="field-label is-normal">
                                              <label class="label">Background Color</label>
                                            </div>
                                            <div class="field-body">
                                              <div class="field">
                                                <div class="control">
                                                  <input type="color" value="#209cee">
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                          
                                          <div class="field is-horizontal">
                                            <div class="field-label is-normal">
                                              <label class="label">Text Color</label>
                                            </div>
                                            <div class="field-body">
                                              <div class="field">
                                                <div class="control">
                                                    <input type="color" value="#ffffff">
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                          
                                          <div class="field is-horizontal">
                                            <div class="field-label">
                                              <!-- Left empty for spacing -->
                                            </div>
                                            <div class="field-body">
                                              <div class="field">
                                                <div class="control">
                                                  <button class="button is-primary">
                                                    Add
                                                  </button>
                                                </div>
                                              </div>
                                            </div>
                                          </div>

                                <div class="field is-grouped">
                                    <p class="control is-expanded">
                                        <input class="input" type="text" placeholder="Label name" v-model="newLabel" required>
                                    </p>
                                    <p class="control">
                                        <input class="input" type="text" placeholder="Shortcut key" v-model="newShortcut" required>
                                    </p>
                                    <p class="control">
                                        <a class="button is-primary" v-on:click="addLabel()">
                                            Add
                                        </a>
                                    </p>
                                </div>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>
                                                Id
                                            </th>
                                            <th>Label name</th>
                                            <th>Shortcut key</th>
                                            <th>Deletion</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(label, index) in labels">
                                            <th>[[ index + 1 ]]</th>
                                            <td>[[ label.text ]]</td>
                                            <td>[[ label.shortcut ]]</td>
                                            <td><a class="button is-danger is-small" v-on:click="removeLabel(index)">Delete</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>

        <div class="column is-4">
            <div class="box content">
                <article class="post">
                    <h4>Data Management</h4>
                    <div class="media">
                        <div class="media-content">
                            <div class="content">
                                <p>Data upload</p>
                                <div class="file has-name is-right is-fullwidth">
                                    <label class="file-label">
                                        <input class="file-input" type="file" name="resume" ref="file" v-on:change="handleFileUpload()" />
                                        <span class="file-cta">
                                            <span class="file-icon">
                                                <i class="fas fa-upload"></i>
                                            </span>
                                            <span class="file-label">
                                                Upload
                                            </span>
                                        </span>
                                        <span class="file-name">
                                            [[ file_name ]]
                                        </span>
                                    </label>
                                </div>
                                <br>
                                <p>Data Download</p>
                                <a class="button" href="{% url 'download' project.id %}">
                                    <span class="icon">
                                        <i class="fas fa-download"></i>
                                    </span>
                                    <span>Download</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>

</section>
<script type="text/javascript" src="{% static 'js/project_admin.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript">
    var ctx = document.getElementById('myChart').getContext('2d');
    var ctx1 = document.getElementById('myPie');

    var pie = new Chart(ctx1, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [10, 20],
                backgroundColor: ["#50dc64", "#3399ff"],
            }],
            labels: [
                'Labeled',
                'Unlabeled'
            ]
        }
    });

    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: [50, 100, 150, 200, 250, 300],
            datasets: [{
                    label: "training",
                    backgroundColor: 'rgb(80, 220, 100)',
                    borderColor: 'rgb(80, 220, 100)',
                    //data: [72, 83, 86, 87, 88, 88.5],
                    data: [94, 93.5, 93, 93, 93, 92.5],
                    fill: false,
                },
                {
                    label: "validation",
                    backgroundColor: 'rgb(51, 153, 255)',
                    borderColor: 'rgb(51, 153, 255)',
                    data: [72, 80, 83, 85, 86, 86.5],
                    fill: false,
                }
            ]
        },

        // Configuration options go here
        options: {
            legend: {
                display: true,
                position: 'right'
            },
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Accuracy'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Number of training samples'
                    }
                }],
            }
        }
    });
</script>
{% endblock %}