<error-page>
  <div class="content">
    <h1 if="{ getStatusCode() }">{ getStatusCode() }</h1>
    <h2>{ props.code }</h2>
    <template if="{ props.code === 'CATALOG_NOT_FOUND' }">
      <p>We received a 404 status code from your registry.</p>
      <p>The contact point was <a href="{ props.url }">{ props.url }</a></p>
      <p>
        This may be caused by a misconfiguration of Docker Registry UI. Check the
        <a href="https://joxit.dev/docker-registry-ui/#faq">FAQ</a> and
        <a href="https://joxit.dev/docker-registry-ui/#available-options">Available options</a>
      </p>
    </template>
    <template if="{ props.code === 'MIXED_CONTENT' }">
      <p>
        <span>Mixed Content</span>: The page at `<a href="{ window.location.origin }">{ window.location.origin }</a>`
        was loaded over HTTPS, but requested an insecure server endpoint `<a href="{ new URL(props.url).origin }"
          >{ new URL(props.url).origin }</a
        >`.
      </p>
      <p>This request <span>may</span> has been blocked; the content must be served over HTTPS.</p>
      <p>
        You may unset the option `<span>REGISTRY_URL</span>` and set the registry server container URL in
        `<span>NGINX_PROXY_PASS_URL</span>`. It's usually the name of your container, and it should be on the shame
        network as the UI.
      </p>
      <p>You can check the issue <a href="https://github.com/Joxit/docker-registry-ui/issues/277">#277</a>.</p>
    </template>
    <template if="{ props.code === 'INCORRECT_URL' }">
      <p>`{ props.url }` does not seems to be a correct URL, should starts with http:// or https://.</p>
    </template>
  </div>
  <script>
    export default {
      getStatusCode() {
        const { props } = this;
        switch (props.code) {
          case 'CATALOG_NOT_FOUND':
            return '404';
        }
      },
      URL: window.URL,
    };
  </script>
  <style>
    :host {
      display: flex;
      flex-direction: row;
      margin-top: 20px;
    }
    :host .content {
      margin: auto;
      text-align: center;
    }
    :host .content a {
      color: var(--accent-text);
    }
    :host .content a:visited {
      color: var(--accent-text);
    }
    :host .content p span {
      color: var(--accent-text);
      font-weight: 700;
    }
    :host .content h2 {
      font-weight: 700;
    }
  </style>
</error-page>
