{{!--
This error template is used for all 400/500 errors, except 404, which might occur on your site.
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
--}}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>{{meta_title}}</title>
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="{{asset "main/css/main.css"}}" />
</head>
<body class="error-template">
    <div id="wrapper">
        <main id="main">
            <div class="error-page inner">

                <header id="header">
                    {{#if @site.logo}}
                    <a href="{{@site.url}}" class="logo image"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
                    {{else}}
                    <a href="{{@site.url}}" class="logo">{{@site.title}}</a>
                    {{/if}}
                    <ul class="icons">
                        {{#if @site.twitter}}
                        <li><a href="{{twitter_url @site.facebook}}" class="icon fa-twitter" title="Twitter"><span class="label">Twitter</span></a></li>
                        {{/if}}
                        {{#if @site.facebook}}
                        <li><a href="{{facebook_url @site.facebook}}" class="icon fa-facebook" title="Facebook"><span class="label">Facebook</span></a></li>
                        {{/if}}
                        <li><a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" class="icon fa-rss" target="_blank" rel="noopener"><span
                                    class="label" title="RSS">RSS</span></a></li>
                    </ul>
                </header>

                <section class="error-wrapper">

                    <section class="error-message">
                        <h1 class="error-code">{{code}}</h1>
                        <p class="error-description">{{message}}</p>
                        <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
                    </section>

                    {{#if errorDetails}}
                    <section class="error-stack">
                        <h3>Theme errors</h3>
                        <ul class="error-stack-list">
                            {{#each errorDetails}}
                                <li>
                                    <em class="error-stack-function">{{{rule}}}</em>

                                    {{#each failures}}
                                        <p><span class="error-stack-file">Ref: {{ref}}</span></p>
                                        <p><span class="error-stack-file">Message: {{message}}</span></p>
                                    {{/each}}
                                </li>
                            {{/each}}
                        </ul>
                    </section>
                    {{/if}}

                </section>
            </div>
        </main>
    </div>
</body>
</html>