<!DOCTYPE html>
<html lang="<%= I18n.locale %>">
<head><meta charset="UTF-8">
<title><%= t('production_error.title') %></title>
<style>
body {
    background: #f0eee1;
    font-family: "Noto Sans", "Roboto", "DejaVu Sans", "Ubuntu", "Arial", sans-serif;
    margin: 10px;
    padding: 0;
}

h1 { margin-top: 0; }
code { font-size: 120%; }

div#details {
    margin: 1em 0;
}

div > p {
    padding: 0;
    margin: 0;
}

button {
    padding: 1em 5em;
}

footer {
    text-align: center;
    font-size: 75%;
    color: #888;
    min-width: 600px;
    max-width: 800px;
    margin: 20px auto;
    padding-top: 10px;
}

footer p {
    margin: 0;
    padding: 0;
}
</style>
</head><body>

<h1><%= t('production_error.heading') %></h1>

<p><%= t('production_error.apology', manufacturer: manufacturer_name) %></p>

<div id="details">
    <p><strong><%= t('production_error.log_identifier') %>:</strong> <code><%= @error_uuid %></code></p>
    <p><strong><%= t('production_error.server_time') %>:</strong> <code><%= Time.now.strftime('%Y-%m-%d %H:%M:%S') %></code></p>
    <p><strong><%= t('production_error.server_hostname') %>:</strong> <code><%= Socket.gethostname %></code></p>
    <p><strong><%= t('production_error.request') %>:</strong> <code><%= @request.method %> <%= @request.url %></code></p>
</div>

<button type="button" id="copy"><%= t('production_error.copy') %></button>

<footer class="public">
    <%= manufacturer_logo %>
    <p><%= copyright_with_year %></p>
</footer>

<%= render partial: 'shared/copy_text', formats: [:js] %>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelector("button#copy").addEventListener("click", () => {
        let parts = [];

        parts.push("Log identifier: <%= @error_uuid %>");
        parts.push("Server time: <%= Time.now.strftime('%Y-%m-%d %H:%M:%S') %>");
        parts.push("Server hostname: <%= Socket.gethostname %>");
        parts.push("Request: <%= @request.method %> <%= @request.url %>");

        copyTextToClipboard(parts.join("\n") + "\n");
    });
});
</script>
</body>
</html>
