<!DOCTYPE html>
<html lang="fi">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="robots" content="noindex,nofollow" />
    <title>LähiTapiola</title>
    <link rel="stylesheet" href="./fonts/duet/lib/localtapiola.css" />
    <link rel="stylesheet" href="./fonts/duet/lib/turva.css" />
    <link rel="stylesheet" href="./css/duet/lib/duet.min.css" />
    <script type="module" src="./js/duet/lib/duet/duet.esm.js"></script>
    <script nomodule src="./js/duet/lib/duet/duet.js"></script>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <duet-header skip-to-id="#content" contact="Ota yhteyttä"></duet-header>
    <duet-hero
      heading="Sivun otsikko"
      description="Tämä on ingressi. Lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy
      laoreet. Lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet."
      image="https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg"
      variation="image"
      button-label="Toimintopainike"
      button-url="#"
      id="content"
    >
    </duet-hero>
    <duet-layout>
      <div slot="main">
        <duet-card padding="large" id="signin">
          <duet-heading level="h2" visual-level="h4" border>H4 Otsikko</duet-heading>
          <duet-spacer size="x-large"></duet-spacer>
          <duet-paragraph>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet. Lorem ipsum dolor sit amet
            consectetuer adipiscing elit
            <duet-link url="#">no nummy laoreet</duet-link>.
          </duet-paragraph>
          <duet-spacer></duet-spacer>
          <duet-grid>
            <duet-grid-item margin="none" max-width="400px" fill>
              <form novalidate method="post">
                <duet-input expand type="email" label="Tunnus" placeholder="nimi@email.com" name="email"></duet-input>
                <duet-input type="password" expand label="Salasana" placeholder="••••••••••••" name="password">
                </duet-input>
                <duet-spacer></duet-spacer>
                <duet-button submit variation="secondary">Kirjaudu</duet-button>
                <duet-spacer size="small"></duet-spacer>
              </form>
            </duet-grid-item>
          </duet-grid>
        </duet-card>
      </div>
      <div slot="sidebar">
        <duet-card background="primary-lightest" padding="large" margin="none">
          <duet-heading level="h2" visual-level="h5">H5 Otsikko</duet-heading>
          <duet-spacer size="x-small"></duet-spacer>
          <duet-link url="#">Lisätietolinkki 1</duet-link><br />
          <duet-link url="#">Lisätietolinkki 2</duet-link><br />
          <duet-link url="#">Lisätietolinkki 3</duet-link><br />
          <duet-link url="#">Lisätietoa 4</duet-link><br />
          <duet-link url="#">Linkki 5</duet-link><br />
          <duet-spacer></duet-spacer>
        </duet-card>
      </div>
    </duet-layout>
    <duet-footer
      logo-href="#"
      language="fi"
      items='[
        { "label": "Hae korvausta", "href": "#", "icon": "navigation-make-claim" },
        { "label": "Osta vakuutus", "href": "#", "icon": "action-buy-insurance" },
        { "label": "Yhteystiedot", "href": "#", "icon": "form-tel" }
      ]'
      menu='[
        { "label": "Turvallisuus ja käyttöehdot", "href": "#" },
        { "label": "Evästeet", "href": "#" },
        { "label": "Henkilötietojen käsittely", "href": "#" }
      ]'
    >
    </duet-footer>
    <script>
      // Save references to components we want to adjust below
      var header = document.querySelector("duet-header")
      // Set the contact menu items
      header.contactItems = [
        { label: "Kysy lisätietoja", href: "mailto:minna.poikela@lahitapiola.fi" },
        { label: "Yhteystiedot", href: "yhteystiedot.html" },
      ]
      // Set label and href for session item in header
      header.session = {
        label: "Kirjaudu sisään",
        href: "#signin",
        type: "signin",
      }
    </script>
  </body>
</html>
