{% extends "orgapy/layout/skeleton.html" %}
{% load static %}
{% block title %}Groceries{% endblock title %}

{% block head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'orgapy/css/groceries.css' %}">
<script src="{% static 'orgapy/js/dragrank.js' %}"></script>
<script src="{% static 'orgapy/js/groceries.js' %}"></script>
{% endblock head %}

{% block column_main %}
<div class="card card--nobottom" style="margin-bottom: -.8rem">
    <h1 class="card-header">Groceries</h1>
    <div class="card-body">
        <div class="hint">Check items to put on the list, and click <q>Create list</q> to turn it into a note.</div>
    </div>
</div>

<div class="card-actions card-actions--sticky">
    <button id="createListButton"><i class="ri-sticky-note-line"></i><span>Create list</span></button>
    <button id="saveButton" disabled><i class="ri-save-line"></i><span>Save for later</span></button>
</div>

<div class="card">
    <div id="groceriesContainer" class="groceries"></div>
</div>

<script>
    bindGroceries(groceriesContainer, saveButton, createListButton);
</script>
{% endblock column_main %}