{% extends "base.jinja2" %}

{% block title %}LoginWeen Home{% endblock %}

{% block nav %}
<li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/pumpkin_roll">Pumpkin Roll</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/whack_a_pumpkin">Whack a Pumpkin</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/countdown">Countdown</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/profile">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/logout">Logout</a>
</li>
{% endblock %}

{% block body %}
<div class="text-center mt-3">
    <h1 style="color: orange;">Posts</h1>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPostModal">Create a post</button>
</div>
<div class="container mt-4">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    {% for post in posts %}
        <div class="col">
            <div class="card h-100">
                <canvas id="pumpkin-canvas-{{ post.0 }}" width="600" height="600" class="card-img-top"></canvas>
                <div class="card-body">
                    <h5 class="card-title">{{ post.2 }}</h5>
                    <p class="card-text">By: {{ post.1 }}<br>Created at: {{ post.4 }}</p>
                    <button type="button" id="lightBtn-{{ post.0 }}" class="btn btn-warning">Light!</button>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
</div>

<div class="modal fade" id="createPostModal" tabindex="-1" aria-labelledby="createPostModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="createPostModalLabel" style="color: orange;">Create a post</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="modal-form" method="POST">
                <div class="modal-body">
                    <h4>Your carved pumpkin:</h4>
                    <input type="hidden" name="pattern" id="pattern_field">
                    <canvas id="modal-pumpkin-canvas" width="400" height="400"></canvas>
                    
                    <div>
                        <button type="button" id="modallightBtn" class="mt-3 btn btn-warning">Light!</button>
                        <button type="button" id="modalclearBtn" class="mt-3 btn btn-danger">Clear</button>
                    </div>

                    <div class="input-group mt-3">
                        <input required name="comment" type="text" class="form-control" placeholder="Comment" aria-label="Comment">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let CELL_SIZE = 0;

{% for post in posts %}
const [ctx_{{ post.0 }}, canvas_{{ post.0 }}, img_{{ post.0 }}] = setup_pumpkin("pumpkin-canvas-{{ post.0 }}", null, null, null, null, {{ grid_size }}, false);
let pattern_{{ post.0 }} = {{ post.3 }};

CELL_SIZE = canvas_{{ post.0 }}.width / 15;

img_{{ post.0 }}.addEventListener('load', function() {
    unlight_pumpkin(ctx_{{ post.0 }}, CELL_SIZE, pattern_{{ post.0 }});
});
setup_lightbtn(ctx_{{ post.0 }}, CELL_SIZE, "lightBtn-{{ post.0 }}", pattern_{{ post.0 }})
{% endfor %}

setup_pumpkin("modal-pumpkin-canvas", "modalclearBtn", "modallightBtn", "modal-form", "pattern_field", {{ grid_size }});

document.getElementById('modal-form').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    
    fetch('/submit_post', {
        method: 'POST',
        body: formData
    }).then(response => {
        bootstrap.Modal.getInstance(document.getElementById('createPostModal')).hide();
        location.reload();
    })
    .catch(error => {
        alert(`Error during submitting post: ${error}`);
    });

    
});
</script>
{% endblock body %}