{% extends "course_flow/base.html" %}
<!-- -->
{% load static i18n %}
<!-- -->
{% block header %} {% endblock %}
<!-- -->
{% block title %}{% endblock %}
<!-- -->
{% block metadescription %} {% endblock %}
<!-- -->
{% block body %}
<div id="content-container" class="body-wrapper">
    <div class="home-menu-container">
        <h1>CourseFlow</h1>
        <hr>
        <p>{% trans "Welcome to CourseFlow, a course, curriculum, and activity planning tool by SALTISE." %}</p>
        <h3>{% trans "Quick Links:" %}</h3>
        <div class="home-menu-grid">
            <div class="home-item">
                <a class="hover-shade" href='{% url "course_flow:my-projects" %}'><h4>{% trans "My Projects" %}</h4>
                <p>{% trans "Explore and create your projects" %}</p></a>
                {% for project in user.project_set.all|slice:":7" %}
                  <a class="hover-shade"
                        href="{% url 'course_flow:project-update' pk=project.pk %}"
                     >
                    {{ project.title }}
                  </a>
                {% endfor %}
                <a class="hover-shade" href="{% url 'course_flow:project-create' %}">{% trans "+Create new project" %}</a>
            </div>
            <div class="home-item">
                <a class="hover-shade" href='{% url "course_flow:my-favourites" %}'><h4>{% trans "My Favourites" %}</h4>
                <p>{% trans "Your favourited items" %}</p></a>
                {% for favourite in user.favourite_set.all|slice:":5" %}
                  <a class="hover-shade"
                     {% if favourite.content_type == "project" %}
                        href="{% url 'course_flow:project-update' pk=favourite.content_object.pk %}"
                     {% else %}
                        href="{% url 'course_flow:workflow-update' pk=favourite.content_object.pk %}"
                     {% endif %}
                     >
                    {{ favourite.content_object }}
                  </a>
                {% endfor %}
            </div>
            <div class="home-item">
                <a class="hover-shade" href='{% url "course_flow:explore" %}'><h4>{% trans "Explore" %}</h4>
                <p>{% trans "Explore published material by other users" %}</p>
                <div class="home-item-icon-container">
                <img src = "{% static 'course_flow/img/images_svg/explore.svg' %}"/>
                    </div>
                </a>
                
            </div>
        </div>
    </div>


</div>
<!-- -->
{% endblock %}
<!-- -->
{% block foot %} {% endblock %}
<!-- -->
{% csrf_token %}
<!-- -->
{% block scripts %} {{ block.super }}
<script nonce="{{request.csp_nonce}}">

  const iconpath = "{% static 'course_flow/img/images_svg/' %}";
  const create_path = {
      project:"{% url 'course_flow:project-create' %}",
      activity:"{% url 'course_flow:activity-strategy-create' %}",
      course:"{% url 'course_flow:course-strategy-create' %}"
  };
  const user_id = {{ user.id }};
  const read_only=false;

  



  //Causes the specified object to delete itself
  function deleteSelf(objectID,objectType,callBackFunction=()=>console.log("success")){
      $.post("{% url 'course_flow:delete-self' %}", {
          objectID:JSON.stringify(objectID),
          objectType:JSON.stringify(objectType)
      }).done(function(data){
          if(data.action == "posted") callBackFunction(data);
          else console.log("Failed");
      });
  }
</script>
{% endblock %}