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

{% block title %}

{% if user.is_authenticated %}

<nav class="navbar navbar-default">
  <title id="canvas-title"></title>
<h3 class="navbar-brand">Signed in as {{ user }}</h3>

    <a class="anchor-button" href="{{ project.get_absolute_url }}">
        <button>
            Return to Project<i class="material-icons">face</i>
        </button>

    </a>
{% else %}
    <a class="anchor-button" href="{% url 'index' %}">
        <button>
            Return to Landing Page
        </button>
    </a>

{% endif %}

{% endblock %}

{% block content %}
</nav>


{% if user.is_authenticated %}

<!--====================================================
                TAG COMPONENT
=====================================================-->

<div id = "tag-div">
    <h3 v-if="auth"></h3>

    <div id="saved_tags_row">

    <label>Saved Tags for this Canvas...<label>

    <tag
        v-if="auth"
        id="tag"
        v-for="(tag, index) in tagList"
        v-bind:label = tag.fields.label
        v-bind:key="index"
        v-bind:index="index"
    >

        <li
            class="tag-elem"
            v-if="this.label != null"
        >
            <button v-on:click="tagInfo($event, index), show=true" class="tag-button">
                <% label %>
            </button>


            <tag-popup
                id="tag-popup"
                v-bind:label="this.label"
                v-bind:canvases="canvasList[index]"
                v-bind:tag="tagList[index]"
                v-bind:index="index"
                v-bind:ideas="ideaList[index]"
                v-show="show"
                @close="show=false"
                @delete-tag="showTag=false" show="false"
            >
            </tag-popup>
        </li>
    </tag>
    <tag v-else>
        <p>Disabled for Trial User</p>
    </tag>
  </div>

</div>

</br>

{% endif %}


<!--====================================================
                IDEA COMPONENT
=====================================================-->

<div id="idea-div" class="table">


        <div class="flex-container">
                <idea
                    v-for="(ideas, index) in ideaList"
                    v-bind:key="index"
                    v-bind:index="index"
                    v-bind:ideas="ideas"
                    v-bind:is-typing="isTyping[index]"
                    v-bind:categories="categories"
                    v-bind:user="typingUser[index]"
                    v-bind:is-auth="auth"
                    v-bind:admin-names="adminNameList"
                    class="flex-item"
                >
                </idea>
        </div>


</div>


<!--====================================================
                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/canvasDetail.js' %}"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.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 %}
