{{ define "new_blogpost.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
    <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
</head>

<body style="background-color: rgb(56, 56, 56);">
    {{ template "navigation.html" .navigation }}
    <div class="container-fluid p-2 position-relative"
        style="width: 80vw; max-width: 80%; background-color: rgb(22, 22, 22);">
        <div class="container">
            <div class="row">
                <div class="col-sm"></div>
                <div class="container position-relative">
                    <a style="color: white; height: fit-content; font-size: xx-large; font-weight: bold; font-family: monospace;">Making a New Post</a>
                    <div class="col m-5">
                        <form method="post" hx-post="/admin/posts" hx-ext="json-enc" hx-target="#response" hx-swap="innerHTML">
                            <div class="row"
                                style="background-color: rgb(22, 22, 22); color: white; height: fit-content; font-size: larger; font-family: monospace;">
                                <a>Post ID:</a>
                                <textarea name="identifier"
                                    style="background-color: rgb(73, 73, 73); color: white;">{{ .Ident }}</textarea>
                            </div>
                            <div class="row"
                                style="background-color: rgb(22, 22, 22); color: white; height: fit-content; font-size: larger; font-family: monospace;">
                                <a>Category:</a>
                                <select name="category" class="form-select"
                                    style="background-color: rgb(73, 73, 73); color: white; height: fit-content; font-size: larger; font-family: monospace;">
                                    <option selected>{{ .DefaultTopic }}</option>
                                    {{ range .Topics }}
                                    <option value="{{ . }}">{{ . }}</option>
                                    {{ end }}
                                </select>
                            </div>
                            <div class="row"
                                style="background-color: rgb(22, 22, 22); color: white; height: fit-content; font-size: large; font-family: monospace;">
                                <a>Time of creation:</a>
                                <textarea name="created"
                                    style="background-color: rgb(73, 73, 73); color: white;">{{ .Created }}</textarea>
                            </div>
                            <div class="row"
                                style="background-color: rgb(22, 22, 22); color: white; height: fit-content; font-size: larger; font-family: monospace;">
                                <a>Post Body:</a>
                                <textarea name="body" rows="30" wrap="soft"
                                    style="background-color: rgb(73, 73, 73); color: white;">{{ .Body }}</textarea>
                            </div>
                            <button type="submit">Send</button><div id="response"></div>
                        </form>
                    </div>
                </div>
                <div class="col-sm"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/htmx.org@1.9.4"></script>
    <script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
</body>
</html>
{{ end }}