% use re qw(regexp_pattern);
<!DOCTYPE html>
<!-- Request ID: <%= $c->req->request_id %> -->
<html>
  <head>
    % my $title = stash('exception') ? 'Server Error' : 'Page Not Found';
    <title><%= $title %> (<%= app->mode %> mode)</title>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="-1">
    %= favicon
    %= javascript '/mojo/highlight.js/highlight.min.js'
    %= javascript '/mojo/highlight.js/mojolicious.min.js'
    %= javascript '/mojo/popper/popper.js'
    %= javascript '/mojo/bootstrap/bootstrap.js'
    %= stylesheet '/mojo/bootstrap/bootstrap.css'
    %= stylesheet '/mojo/highlight.js/highlight-mojo-dark.css'
    %= stylesheet '/mojo/mojo.css'
    <script>
      'use strict';
      hljs.initHighlightingOnLoad();
      window.addEventListener('load', () => {
        for (const tooltip of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
          new bootstrap.Tooltip(tooltip);
        }
      });
    </script>
    <style>
      .fa-copyright {
        line-height: 12px;
        height: 12px;
        width: 12px;
        display: inline-block;
      }

      .fa-icon {
        width: 32px;
        display: inline-block;
        line-height: 24px;
      }
    </style>
  </head>
  <body class="d-flex flex-column h-100">
    <header>
      <nav class="navbar navbar-expand-lg navbar-dark mojobar">
        <a href="https://mojolicious.org" id="mojobar-brand" class="navbar-brand">
          <picture>
            <img src="<%= url_for_file '/mojo/logo-white.png' %>"
              srcset="<%= url_for_file '/mojo/logo-white-2x.png' %> 2x">
          </picture>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarNav" class="collapse navbar-collapse">
          <ul class="navbar-nav me-auto">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                Documentation
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="https://docs.mojolicious.org">Overview</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://docs.mojolicious.org/Mojolicious/Guides/Tutorial">Tutorial</a>
                <a class="dropdown-item" href="https://docs.mojolicious.org/Mojolicious/Guides/Growing">Growing</a>
                <a class="dropdown-item" href="https://docs.mojolicious.org/Mojolicious/Guides/Routing">Routing</a>
                <a class="dropdown-item" href="https://docs.mojolicious.org/Mojolicious/Guides/Rendering">Rendering</a>
                <a class="dropdown-item" href="https://docs.mojolicious.org/Mojolicious/Guides/Testing">Testing</a>
                <a class="dropdown-item" href="https://docs.mojolicious.org/Mojolicious/Guides/Cookbook">Cookbook</a>
                <a class="dropdown-item" href="https://docs.mojolicious.org/Mojolicious/Guides/Contributing">Contributing</a>
                <a class="dropdown-item" href="https://docs.mojolicious.org/Mojolicious/Guides/FAQ">FAQ</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://docs.mojolicious.org#API">API</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="communityDropdown" role="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                Community
              </a>
              <div class="dropdown-menu" aria-labelledby="communityDropdown">
                <a class="dropdown-item" href="https://web.libera.chat/#mojo">IRC</a>
                <a class="dropdown-item" href="https://forum.mojolicious.org">Forum</a>
                <a class="dropdown-item" href="https://fosstodon.org/@mojolicious">Mastodon</a>
                <a class="dropdown-item" href="https://www.linkedin.com/groups/8963713/">LinkedIn</a>
                <a class="dropdown-item" href="https://github.com/mojolicious/mojo/wiki">Wiki</a>
                <a class="dropdown-item" href="https://metacpan.org/release/Mojolicious/">CPAN</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://github.com/mojolicious/mojo/">Contribute on GitHub</a>
            </li>
          </ul>
          <form action="https://www.google.com/cse" target="_blank" class="form-inline my-2 my-lg-0">
            %= hidden_field cx => '014527573091551588235:pwfplkjpgbi'
            %= hidden_field ie => 'UTF-8'
            %= search_field 'q', placeholder => 'Search...'
          </form>
        </div>
      </nav>
    </header>
    <script>
      'use strict';
      function mojoDrawer(handle, drawer) {
        const handleEl = document.querySelector(handle);
        if (handleEl === null) return;
        handleEl.addEventListener('click', () => {
          const drawerEl = document.querySelector(drawer);
          let text = handleEl.innerText;
          text = text == "tap for more" ? "tap for less" : "tap for more";
          const divTap = document.querySelector(handle + ' div.tap');
          if (divTap !== null) divTap.innerText = text;
          drawerEl.classList.toggle('d-none');
        });
      }
      window.addEventListener('load', () => {
        mojoDrawer('#trace', '#frames');
        mojoDrawer('#more', '#infos');
      });
    </script>
    <div class="container flex-grow-1">
      <div class="row flex-wrap">
        <main class="col-sm-12 col-md-8 col-lg-10 py-md-3 pl-md-5">
          <div class="row mojo-divider">
            % my $kv = begin
              % my ($key, $value) = @_;
              <tr>
                <td class="key text-right"><%= $key %>:</td>
                <td class="value"><pre><%= $value %></pre></td>
              </tr>
            % end
            % if (my $exception = stash 'exception') {
              <div class="alert alert-danger wide" role="alert">
                <h2>Server Error</h2>
                This application is in <b>development</b> mode and will show internal information to help you with
                debugging.
              </div>
              % my $cv = begin
                % my ($key, $value, $i) = @_;
                %= tag 'tr', $i ? (class => 'important') : (), begin
                  <td class="text-right"><%= $key %></td>
                  <td class="context-value wide">
                    <pre><code><%= $value %></code></pre>
                  </td>
                % end
              % end
              <div id="showcase" class="box code no-bottom-border no-top-border border-radius-top">
                <pre id="error" class="error"><%= $exception->message %></pre>
                <div id="context" class="more">
                  <table class="wide">
                    % for my $line (@{$exception->lines_before}) {
                      %= $cv->($line->[0], $line->[1])
                    % }
                    % if (defined $exception->line->[1]) {
                      %= $cv->($exception->line->[0], $exception->line->[1], 1)
                    % }
                    % for my $line (@{$exception->lines_after}) {
                      %= $cv->($line->[0], $line->[1])
                    % }
                  </table>
                </div>
                % if (defined $exception->line->[2]) {
                  <div id="insight">
                    <table class="wide">
                      % for my $line (@{$exception->lines_before}) {
                        %= $cv->($line->[0], $line->[2])
                      % }
                      %= $cv->($exception->line->[0], $exception->line->[2], 1)
                      % for my $line (@{$exception->lines_after}) {
                        %= $cv->($line->[0], $line->[2])
                      % }
                    </table>
                  </div>
                  <div class="tap">tap for more</div>
                  <script>
                    'use strict';
                    let current = '#context';
                    function mojoShowcase() {
                      const showcase = document.querySelector('#showcase');
                      function onClickShowcase() {
                        showcase.removeEventListener('click', onClickShowcase);
                        let currentEl = document.querySelector(current);
                        currentEl.classList.toggle('d-none');
                        current = current == '#context' ? '#insight' : '#context';
                        currentEl = document.querySelector(current);
                        currentEl.classList.toggle('d-none');
                        mojoShowcase();
                      };
                      showcase.addEventListener('click', onClickShowcase);
                    }
                    mojoShowcase();
                    const insightEl = document.querySelector('#insight');
                    insightEl.classList.toggle('d-none');
                  </script>
                % }
              </div>
              <div id="trace" class="box no-padding more no-top-border border-radius-bottom">
                % if (@{$exception->frames}) {
                  <div id="frames" class="d-none">
                    <table class="striped wide">
                      % for my $frame (@{$exception->frames}) {
                        <tr>
                          <td class="value">
                            <pre>File "<%= $frame->[1] %>", line <%= $frame->[2] %>, in "<%= $frame->[0] %>"</pre>
                          </td>
                        </tr>
                      % }
                    </table>
                  </div>
                  <div class="tap">tap for more</div>
                % }
              </div>
            % }
            % else {
              <div class="alert alert-warning wide" role="alert">
                <h2>Page Not Found</h2>
                This application is in <b>development</b> mode and will show internal information to help you with
                debugging.
              </div>
              <div id="routes" class="box no-padding border-radius-both">
                <div class="padded-content">
                  <p>
                    None of these routes could generate a response for your
                    <code><%= $c->req->method %></code> request for
                    <code><%= $c->req->url->path->to_route %></code>, maybe you need
                    to add a new one?
                  </p>
                </div>
                % my $walk = begin
                  % my ($walk, $route, $depth) = @_;
                  % my $pattern = $route->pattern;
                  % my $unparsed = $pattern->unparsed || '/';
                  % $unparsed = "+$unparsed" if $depth;
                  % $pattern->match('/', $route->is_endpoint && !$route->partial);
                  % my $regex = (regexp_pattern $pattern->regex)[0];
                  <tr data-bs-toggle="tooltip" data-bs-placement="left" data-bs-html="true"
                    data-bs-title="<b>Regex:</b> <code><%= $regex %></code>">
                    <td class="value">
                      <pre><%= '  ' x $depth %><%= $unparsed %></pre>
                    </td>
                    <td class="value">
                      <pre><%= uc(join ',', @{$route->methods // []}) || '*' %></pre>
                    </td>
                    <td class="value">
                      % my $name = $route->name;
                      % my $class = $route->has_custom_name ? 'badge-success' : 'badge-secondary';
                      <span class="badge <%= $class %>"><%= $name %></span>
                    </td>
                  </tr>
                  % $depth++;
                  %= $walk->($walk, $_, $depth) for @{$route->children};
                  % $depth--;
                % end
                <table class="striped-grey wide">
                  <thead>
                    <tr>
                      <th>Pattern</th>
                      <th>Methods</th>
                      <th>Name</th>
                    </tr>
                  </thead>
                  %= $walk->($walk, $_, 0) for @{app->routes->children};
                </table>
              </div>
            % }
          </div>
          <div class="row mojo-divider">
            <div id="request" class="box no-padding no-bottom-border border-radius-top">
              <table class="striped fixed-table wide">
                % my $req = $c->req;
                %= $kv->('Request ID' => $req->request_id)
                %= $kv->(Method => $req->method)
                % my $url = $req->url;
                %= $kv->(URL => $url->to_string)
                %= $kv->('Base URL' => $url->base->to_string)
                %= $kv->(Parameters => dumper $req->params->to_hash)
                %= $kv->(Stash => dumper $snapshot)
                %= $kv->(Session => dumper session)
                %= $kv->(Version => $req->version)
                % for my $name (sort @{$c->req->headers->names}) {
                  % my $value = $c->req->headers->header($name);
                  %= $kv->($name, $value)
                % }
              </table>
            </div>
            <div id="more" class="box no-padding more no-top-border border-radius-bottom">
              <div id="infos" class="d-none">
                <table class="striped fixed-table wide">
                  %= $kv->(Perl => "$^V ($^O)")
                  % my $version  = $Mojolicious::VERSION;
                  % my $codename = $Mojolicious::CODENAME;
                  %= $kv->(Mojolicious => "$version ($codename)")
                  %= $kv->(Home => app->home)
                  %= $kv->('Template paths' => dumper app->renderer->paths)
                  %= $kv->('Template classes' => dumper app->renderer->classes)
                  %= $kv->('Static paths' => dumper app->static->paths)
                  %= $kv->('Static classes' => dumper app->static->classes)
                  %= $kv->(Include => dumper \@INC)
                  %= $kv->(Config => dumper app->config)
                  %= $kv->(Moniker => app->moniker)
                  %= $kv->(Name => $0)
                  %= $kv->(Executable => $^X)
                  %= $kv->(PID => $$)
                  %= $kv->(Time => scalar localtime(time))
                </table>
              </div>
              <div class="tap tap-border-top">tap for more</div>
            </div>
          </div>
          <div class="row">
            % if (@{app->log->history}) {
                % my $log = join '', map { scalar app->log->format->(@$_) } @{app->log->history};
                <pre class="mojo-terminal"><code class="nohighlight"><%= $log %></code></pre>
            % }
            % else {
              <div class="alert alert-warning wide" role="alert">
                The application log appears to be empty, perhaps the log level <b><%= app->log->level %></b> is too
                high?
              </div>
            % }
          </div>
        </main>
      </div>
    </div>
    <footer>
      <div class="container-fluid p-3 mojo-footer">
        <div class="row">
          <div class="col-sm align-self-center text-center mojo-free">
            <b>Free</b> and <b>Open Source</b>.
          </div>
          <div class="col-sm align-self-center text-center mojo-copy">
              <i class="far fa-copyright"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248s248-111.033 248-248S392.967 8 256 8zm0 448c-110.532 0-200-89.451-200-200c0-110.531 89.451-200 200-200c110.532 0 200 89.451 200 200c0 110.532-89.451 200-200 200zm107.351-101.064c-9.614 9.712-45.53 41.396-104.065 41.396c-82.43 0-140.484-61.425-140.484-141.567c0-79.152 60.275-139.401 139.762-139.401c55.531 0 88.738 26.62 97.593 34.779a11.965 11.965 0 0 1 1.936 15.322l-18.155 28.113c-3.841 5.95-11.966 7.282-17.499 2.921c-8.595-6.776-31.814-22.538-61.708-22.538c-48.303 0-77.916 35.33-77.916 80.082c0 41.589 26.888 83.692 78.277 83.692c32.657 0 56.843-19.039 65.726-27.225c5.27-4.857 13.596-4.039 17.82 1.738l19.865 27.17a11.947 11.947 0 0 1-1.152 15.518z"/></svg></i> 2008-2024 Sebastian Riedel and the
              <a href="https://docs.mojolicious.org/Mojolicious#AUTHORS">Mojolicious contributors</a>.
          </div>
          <div class="col-sm align-self-center text-center mojo-social">
            <a alt="GitHub" href="https://github.com/mojolicious/mojo" class="fa-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512" style="height: 23px;"><path fill="currentColor" d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1s10.9-55.1 36.7-55.1s36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95c-37.9 76.6-142.1 74.8-216.7 74.8c-75.8 0-186.2 2.7-225.6-74.8c-14.6-29-20.2-63.1-20.2-95c0-41.9 13.9-81.5 41.5-113.6c-5.2-15.8-7.7-32.4-7.7-48.8c0-21.5 4.9-32.3 14.6-51.8c45.3 0 74.3 9 108.8 36c29-6.9 58.8-10 88.7-10c27 0 54.2 2.9 80.4 9.2c34-26.7 63-35.2 107.8-35.2c9.8 19.5 14.6 30.3 14.6 51.8c0 16.4-2.6 32.7-7.7 48.2c27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6c-18.9 0-37 3.4-56 6c-14.9 2.3-29.8 3.2-45.1 3.2c-15.2 0-30.1-.9-45.1-3.2c-18.7-2.6-37-6-56-6c-46.8 0-73.5 38.7-73.5 82.6c0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1s36.7-34.2 36.7-55.1s-10.9-55.1-36.7-55.1z"/></svg>
            </a>
            <a alt="Mastodon" href="https://fosstodon.org/@mojolicious" class="fa-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="height: 23px;"><path fill="currentColor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7c-62.52-28.7-228.56-28.4-290.48 0c0 0-63.72 28.5-63.72 125.7c0 115.7-6.6 259.4 105.63 289.1c40.51 10.7 75.32 13 103.33 11.4c50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7c56.12-6.7 105-41.3 111.23-72.9c9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175c25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5l11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1c23.71 27.3 18.4 53 18.4 175z"/></svg>
            </a>
            <a alt="LinkedIn" href="https://www.linkedin.com/groups/8963713/" class="fa-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="height: 23px;"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>
