{{define "queue-get" -}}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>File {{ .info.Name }}</title>
        <link rel="stylesheet" href="/assets/styles.css"/>
        <link rel="stylesheet" href="/assets/bootstrap.min.css">
    </head>
    <body>
    <main className="container">
        <div className="container mt-5">
            <nav aria-label="breadcrumb">
                <ol className="breadcrumb">
                    <li className="breadcrumb-item"><a href="/">Home</a></li>
                    <li className="breadcrumb-item active" aria-current="page">{{ .info.Name }}</li>
                </ol>
            </nav>
            <h1 className="text-3xl font-bold underline">Queue view for {{ .info.Name }}</h1>
            {{ template "flashes" .flashes }}
            <div className="alert alert-secondary alert-dismissible fade show row">
                <div className="col col-2">SQS info latency</div>
                <div className="col col-4">{{ .latency.info }}</div>
                <div className="col col-2">SQS messages latency</div>
                <div className="col col-4">{{ .latency.items }}</div>
                <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {{ $timeFormat := "2006-01-02 03:04:05 -0700" }}
            <table className="table">
                <thead>
                </thead>
                <tbody>
                {{ $attr := .info.Attributes }}
                <tr>
                    <th scope="row">Info</th>
                    <td>Link: <a href="{{ .info.URL }}">{{ .info.Name }}</a></td>
                    <td>ARN: {{ $attr.QueueARN }}</td>
                </tr>
                <tr>
                    <th scope="row">Times</th>
                    <td>Created: {{ timestamp $attr.CreatedTimestamp }}</td>
                    <td>Last modified: {{ timestamp $attr.LastModifiedTimestamp }}</td>
                </tr>
                <tr>
                    <th scope="row" rowspan="2">Durations</th>
                    <td>Queue delay: {{ $attr.DelaySeconds }} seconds</td>
                    <td>Visibility Timeout: {{ $attr.VisibilityTimeout }} seconds</td>
                </tr>
                <tr>
                    <td>Retention period: {{ $attr.MessageRetentionPeriod }} seconds</td>
                    <td>Receive wait time: {{ $attr.ReceiveMessageWaitTimeSeconds }} seconds</td>
                </tr>
                <tr>
                    <th scope="row">Counts</th>
                    <td>Approx. messages: {{ $attr.ApproximateNumberOfMessages }}</td>
                    <td>Approx. delayed: {{ $attr.ApproximateNumberOfMessagesDelayed }}</td>
                </tr>
                <tr>
                    <th scope="row">Messages</th>
                    <td>Approx. not visible: {{ $attr.ApproximateNumberOfMessagesNotVisible }}</td>
                    <td>Max. size: {{ $attr.MaximumMessageSize }}</td>
                </tr>
                {{ if $attr.RedrivePolicy }}
                    <tr>
                        <th scope="row">DeadLetter queue</th>
                        <td>
                            <a href="/queue/{{ nameFromARN $attr.RedrivePolicy.DeadLetterTargetARN }}">{{ $attr.RedrivePolicy.DeadLetterTargetARN }}</a>
                        </td>
                        <td>Max. receive count: {{ $attr.RedrivePolicy.MaxReceiveCount }}</td>
                    </tr>
                {{ end }}
                {{ if .isDLQ }}
                    <tr>
                        <th scope="row">Source queues for DLQ</th>
                        <td>Redrive Permission: {{ $attr.RedriveAllowPolicy.RedrivePermission }}</td>
                        <td>Queues:
                            <ul>
                                {{ range $attr.RedriveAllowPolicy.SourceQueueARNs }}
                                    <li><a href="/queue/{{- nameFromARN . -}}">{{ . }}</a></li>
                                {{ end }}
                            </ul>
                        </td>

                    </tr>
                {{ end }}
                </tbody>
            </table>
        </div>

        <section className="container mt-5">
            <form method="get" id="msg-form" action="/queue/{{ .info.Name }}/confirm">
                <div className="d-flex align-items-center justify-content-between">
                    <h2 className="my-5">Messages</h2>
                    {{ if .isDLQ }}
                        <button type="submit" form="msg-form" id="redrive" name="redrive"
                                className="btn btn-outline-warning bg-warning text-white" disabled>
                            Redrive selection
                        </button>
                    {{ end }}
                    <button type="submit" form="msg-form" id="delete" name="delete"
                            className="btn btn-outline-danger bg-danger-subtle text-danger" disabled>
                        Delete selection
                    </button>
                    <button type="submit" form="msg-form" id="purge" name="purge"
                            className="btn btn-outline-danger bg-danger text-white">
                        Purge whole queue
                    </button>
                </div>

                <table className="table">
                    <thead>
                    <tr>
                        <th scope="col" className="d-flex align-items-center">
                            <input id="select-all" className="form-check-input mt-0 me-3" type="checkbox">
                            <span>Select all</span>
                        </th>
                        <th scope="col">ID</th>
                        <th scope="col">Body</th>
                        <th scope="col">Attributes</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ range $i, $message := .items }}
                        {{ $row := dict "message" $message "i" $i }}
                        {{ template "queue-item" $row }}
                    {{ end }}
                    </tbody>
                </table>
            </form>
        </section>
    </main>
    <script src="/assets/bootstrap.js"></script>
    <script src="/assets/script.js"></script>
    </body>
    </html>
{{end}}

{{ define "queue-item" -}}
    <tr>
        <th scope="row"><input className="form-check-input checkbox" type="checkbox" name="id-{{ .i }}"/>
            <input type="hidden" name="rh-{{ .i }}" value="{{ .message.ReceiptHandle }}"/></th>
        <input type="hidden" name="mid-{{ .i }}" value="{{ .message.MessageId }}"/></th>
        <td>{{ .message.MessageId }}</td>
        <td>{{ abbrev 80 .message.Body }}</td>
        <td>{{ toJson .message.MessageAttributes | abbrev 80 }}</td>
    </tr>
{{ end }}