{{ define "comment" }}
<div class="card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="markdown col-12 col-lg-2 mb-1">
                <img src="{{ .Avatar }}"
                    width="96"
                    height="96"
                    alt="Avatar image">
            </div>
            <div class="markdown col-12 col-lg-10">
                <div class="comment-meta">
                    {{ if and .UserID .Username }}
                        <strong>{{ or .Name "Anonymous" }}</strong> (@{{ .Username }})
                    {{ else }}
                        <strong>{{ or .Name "Anonymous" }}</strong>
                    {{ end }}

                    posted on {{ .Created.Format "January 2, 2006 @ 15:04 MST" }}

                    {{ if .Updated.After .Created }}
                    <span title="{{ .Updated.Format "Jan 2 2006 @ 15:04:05 MST" }}">
                        (updated {{ .Updated.Format "1/2/06 15:04 MST"}})
                    </span>
                    {{ end }}
                </div>

                {{ .HTML }}

                {{ if .Editable }}
                <form action="/comments" method="POST">
                    <input type="hidden" name="_csrf" value="{{ .CSRF }}">
                    <input type="hidden" name="id" value="{{ .ID }}">
                    <input type="hidden" name="thread" value="{{ .ThreadID }}">
                    <input type="hidden" name="subject" value="(editing)">
                    <input type="hidden" name="origin" value="{{ .OriginURL }}">
                    <input type="hidden" name="editing" value="true">

                    <button type="submit"
                        name="submit"
                        value="preview"
                        class="btn btn-sm btn-primary">edit</button>
                    <button type="submit"
                        name="submit"
                        value="delete"
                        class="btn btn-sm btn-danger">delete</button>
                </form>
                {{ end }}
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "comment-form" }}
    {{ if not .IsAuthenticated  }}
    <div class="form-group row">
        <label for="name" class="col-12 col-lg-2 col-form-label">Your name:</label>
        <div class="col-12 col-lg-10">
            <input type="text"
                id="name"
                name="name"
                class="form-control"
                value="{{ .Name }}"
                placeholder="Anonymous">
        </div>
    </div>

    <div class="form-group row">
        <label for="email" class="col-12 col-lg-2 col-form-label">Your email:</label>
        <div class="col-12 col-lg-10">
            <input type="email"
                id="email"
                name="email"
                class="form-control"
                aria-describedby="emailHelp"
                value="{{ .Email }}"
                placeholder="(optional)">
            <small id="emailHelp" class="form-text text-muted">
                Used for your <a href="https://en.gravatar.com/" target="_blank">Gravatar</a>
                and optional thread subscription. <a href="/comments/subscription" target="_blank">Privacy policy.</a>
            </small>

            <label class="form-check-label pl-0">
                <input type="checkbox"{{ if .Subscribe }} checked{{ end }}
                    name="subscribe"
                    value="true">
                <small>Notify me of future comments on this page.</small>
            </label>
        </div>
    </div>
    {{ end }}

    <div class="form-group">
        <label for="body">Message:</label>
        <textarea
            name="body"
            id="body"
            cols="40" rows="10"
            aria-describedby="bodyHelp"
            class="form-control">{{ .Body }}</textarea>
        <small id="bodyHelp" class="form-text text-muted">
            You may format your message using
            <a href="/markdown" target="_blank">GitHub Flavored Markdown</a>
            syntax.
        </small>
    </div>

    <div class="form-group" style="display: none">
        <div class="card">
            <div class="card-header">Sanity Check</div>
            <div class="card-body">
                If you happen to be able to see these fields, do not change
                their values.

                <input type="text" name="url" value="http://" class="form-control" placeholder="Website">
                <textarea name="comment" cols="80" rows="10" class="form-control" placeholder="Comment"></textarea>
            </div>
        </div>
    </div>
{{ end }}