---
import BasicLayout from "../../layouts/BasicLayout.astro";
const pageTitle = "emma's guestbook"
---
<BasicLayout pageTitle={pageTitle}>
    <p>
        hey, just a little heads up. i'm redoing a lot of my site right now.
        i made this guestbook in a bit of a hurry so some helpful things like
        letting you know i got your post and will approve it aren't there just yet.
        but you are welcome to sign it and i'll check every few days to approve entries
        until i get around to adding a bit more friendliness to parts of this guestbook
    </p>
    <form id="add-comment">
        <label for="name-input">name: <input type="text" id="name-input" name="name-input" required></label>
        <label for="website-input">website (optional): <input type="text" name="website-input" id="website-input"></label>
        <label for="math-question">what is seven plus 10: <input type="number" name="math-question" id="math-question" required></label>

        <label for="message-input">message: </label>
        <textarea required name="message-input" id="message-input" rows="8" cols=55"></textarea>
        <button type="submit">send message</button>
    </form>

    <h3>comments</h3>
    <ul class="comments">
    </ul>
    <script>
        import "../../scripts/guestbook-send-comment"
    </script>
    <script>
        import "../../scripts/guestbook-list-comments"
    </script>
</BasicLayout>

<style>
    p {
        margin-bottom: 0.75rem;
    }
    form {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0.5rem;
        width: 40vw;
        height: auto;
    }
    label {
        padding-bottom: 0.5rem;
    }
    #name-input {
        margin-left: 8.88rem;
        width: 15rem;
    }

    #website-input {
        width: 15rem;
        margin-left: 1.8rem;
    }

    #message-input {
        margin-left: 0.6rem;
    }

    #math-question {
        margin-left: 4.5rem;
    }

    textarea {
        resize: none;
        margin-bottom: 0.25rem;
    }

    button {
        margin-left: 0.6rem;
        padding: 0.25rem;
    }
</style>