import { Template } from '../template.js';

class ErrorTemplate extends Template {
  constructor (data) {
    super(data);
  }

  async render () {
    return `
      <div class="fr-container">
        <div class="fr-my-14v fr-mt-md-24v fr-mb-md-20v fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-grid-row--center">
          <div class="fr-py-0 fr-col-12 fr-col-md-6">
            ${await super.render()}
          </div>
          <div class="fr-col-12 fr-col-md-3 fr-col-offset-md-1 fr-px-6w fr-px-md-0 fr-py-0">
            <svg xmlns="http://www.w3.org/2000/svg" class="fr-responsive-img fr-artwork" aria-hidden="true" width="160" height="200" viewBox="0 0 160 200">
              <use class="fr-artwork-motif" href="/dist/artwork/background/ovoid.svg#artwork-motif"></use>
              <use class="fr-artwork-background" href="/dist/artwork/background/ovoid.svg#artwork-background"></use>
              <g transform="translate(40, 60)">
                <use class="fr-artwork-decorative" href="/dist/artwork/pictograms/system/technical-error.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="/dist/artwork/pictograms/system/technical-error.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="/dist/artwork/pictograms/system/technical-error.svg#artwork-major"></use>
              </g>
            </svg>
          </div>
        </div>
      </div>`;
  }
}

ErrorTemplate.NAME = 'error';

export { ErrorTemplate };
