{% extends "base_generic.html" %}
{% load static %}


{% block title %}
<nav class="navbar navbar-default" class="pull-right">
    <h1 style="text-align:center;">Welcome {{ user.username }}.</h1>
<!--====================================================
                COLLABORATOR COMPONENT
=====================================================-->
<div id = "collab-div">
    <collabs
        id="collabs"
    >
        <div>
            <button class="collab-button" title="collaborators" @click="showCollab=true" style="align:right;">Collaborators</button>
            <button v-if="isAdmin" class="collab-button" title="make public" @click="togglePublic()">Toggle Public</button>

            <collab-popup
                id='collab-popup-component'
                v-show="showCollab"
                v-bind:users="usersList"
                v-bind:admins="adminsList"
                v-bind:admin-names="adminNameList"
                v-bind:logged-in-user="loggedInUser"
                v-bind:is-admin="isAdmin"
                v-bind:active="active"
                @close="showCollab=false"
                @delete-admin="show=false"
                @delete-user="show=false"
            >
            </collab-popup>
        </div>
    </collabs>
</div>
</nav>
{% endblock %}


{% block content %}

        <h2 style="text-align:center;">To make new Canvas...</h2>
        <div id="bar" style="padding:20px;">
        <a class="anchor-button" href="{% url 'new-canvas' canvas_type=0 %}"><button>New Ethics Canvas</button></a>
        <a class="anchor-button" href="{% url 'new-canvas' canvas_type=1 %}"><button>New Business Canvas</button></a>
        <a class="anchor-button" href="{% url 'new-canvas' canvas_type=2 %}"><button>New Privacy Canvas</button></a>

    <!-- Return to the project list page -->
    <a class="anchor-button" href="{% url 'project-list' %}"><button>Return to Dashboard</button></a>
    <!-- On logout, redirect to the landing page -->
    <a class="anchor-button" id = "logout" href="{% url 'logout' %}?next=/catalog/"><button>Log Out</button></a>
    </div>
    {% if canvases %}
        <h2 style="text-align:center;">Your canvasses are listed below.</h2>
        <ul>
        {% for canvas in canvases %}
            <li class ="project-comb">
                <a class="anchor-button" class="select-canvas" id='select-canvas-{{canvas.pk}}' href="{{ canvas.get_absolute_url }}"><h3>{{ canvas.title }}</h3></a>
                <a class="anchor-button" class="delete-canvas" id='delete-canvas-{{canvas.pk}}' href="{{ canvas.get_delete_url }}"><button>Remove</button></a>
            </li>
        {% endfor %}
        </ul>
    {% else %}
        <p>You have no canvasses. Click
        <a class="anchor-button" href="{% url 'new-canvas' canvas_type=0 %}">here</a> to create an ethics canvas, or
        <a class="anchor-button" href="{% url 'new-canvas' canvas_type=1 %}">here</a> to create a business canvas or
        <a class="anchor-button" href="{% url 'new-canvas' canvas_type=2 %}">here</a> to create a privacy canvas.
        </p>

    {% endif %}


<!--====================================================
                MODAL COMPONENT
=====================================================-->

<!-- FROM https://vuejs.org/v2/examples/modal.html -->

<script type="text/x-template" id="modal-template">
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">

                    <div class="modal-header">
                        <slot name="header">
                            default header
                        </slot>
                    </div>

                    <div class="modal-body">
                        <slot name="body">
                            default body
                        </slot>
                    </div>

                    <div class="modal-footer">
                        <slot name="footer">
                            default footer
                            <button class="modal-default-button" @click="$emit('close')">
                                OK
                            </button>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</script>
</br>


{% endblock %}

{% block scripts %}
<script src="{% static 'canvas2/javascript/projectDetail.js' %}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
{% endblock %}
