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


{% block title %}

<nav id="exp" class="navbar navbar-default" class="pull-right">
    <h1 class="navbar-brand"><i class="material-icons orange600" style="font-size: 24px">account_circle</i>&nbsp Welcome, {{ user.username }}.</h1>
</nav>
{% endblock %}

{% block content %}
<!-- On logout, redirect to the landing page -->
<a class="anchor-button" id = "logout" href="{% url 'logout' %}?next=/catalog/"><button  id="logo"  type="button" class="btn btn-outline-primary btn-lg">Log Out</button></a>

<a class="anchor-button" href="{% url 'new-project'%}">
  <button id="new_pro" type="button" class="btn btn-outline-primary btn-lg">
<i class="material-icons orange600" style="font-size: 24px">add_circle</i>
 <h3>Create a new Project</h3>
  </button>
</a>

{% if public_projects %}
    <h2 style="text-align: center;">Public Canvasses listed below.</h2>
    <ul>
    {% for project in public_project_list %}
        <li>
            <a class="anchor-button" id = "select-project" href = "{{ project.get_absolute_url }}">
                <button>
                    {{ project.title }}
                </button>
            </a>
        </li>
    {% endfor %}
    </ul><hr id="lbreak">
{% endif %}

    {% if private_projects %}

        <h2 style="text-align: center;">Your projects are listed below.</h2>
        <ul>
        {% for project in private_projects %}
            <li class ="project-comb" align="center">
              <div >
                <a class="project-box" id='select-project-{{project.pk}}' href="{{ project.get_absolute_url }}">
                    <h3>
                        {{ project.title }}
                    </h3>

                        <a  class="delete-project" id='delete-project-{{project.pk}}' href="{{ project.get_delete_url }}">
                            <button>
                                Remove
                            </button>
                        </a>
                     </a>

              </div>

            </li>
        {% endfor %}
      </ul>
    {% else %}
        <p>You have no projects. Click
            <a class="anchor-button" id='new-project' href="{% url 'new-project' %}">
                here
            </a> to create one.
        </p>
    {% endif %}







{% 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 %}
