<!-- [Home page view (homepage.hbs)] -->

<script type="module" src={{ shared "/scripts/homepage.js" }}></script>

<div id="bodywrapper" class="viewport-full flex-column">

  <!-- ------------------------------------------------------------------------ -->
  <!-- Navigation bar -->
  {{> (shared "navbar") }}

  <!-- ------------------------------------------------------------------------ -->
  <!-- Home page -->
  <div id="homePage">

    <!-- ------------------------------------------------------------------------ -->
    <!-- Progress bar -->
    <div id="progressbar" class="progress-bar-inactive"></div>

    <!-- ------------------------------------------------------------------------ -->
    <!-- Homepage Melinda info and service links -->
    <div class="homepage-content">

      <!-- Home page info section -->
      <div class="homepage-info">

        <!-- Home page main headline -->
        <div class="homepage-info-header">
          Melinda-kuvailijan aputyökalut
        </div>

        <!-- Home page info text -->
        <div class="homepage-info-text">
          Melinda on kansallinen kuvailun yhteistyöympäristö ja metatietovaranto, joka kokoaa kirjastoaineistojen
          kuvailevat metatiedot yhteen paikkaan.
        </div>

        <!-- Home page link to wiki -->
        <div class="homepage-info-link">

          <a href="https://www.kiwi.fi/x/CID9Ag" target="_blank" rel="noopener noreferrer"
            title="Avautuu uuteen välilehteen">
            <div class="service-link">
              <div class="service-link-icon icon-arrow">
                <span class="material-icons">east</span>
              </div>
              <div class="service-link-text">
                Melindan asiakaswiki
                <span class="material-icons service-link-icon open-in-new">open_in_new</span>
              </div>
            </div>
          </a>

        </div>


      </div>

      <!-- Home page services section -->
      <div class="homepage-services">

        <!-- List of tool services -->
        <div class="services-tools">

          <div class="homepage-services-header">
            {{title}}
          </div>

          <div class="homepage-services-list">


            <a href="/">
              <div class="service-link">
                <div class="service-link-icon icon-arrow">
                  <span class="material-icons">east</span>
                </div>
                <div class="service-link-text">
                  <!-- Conditional rendering -->
                  {{#if username}}
                  Siirry sovellukseen
                  {{else}}
                  Kirjaudu sisään
                  {{/if}}
                </div>
              </div>
            </a>

          </div>
        </div>

        <!-- List of user services -->
        <div class="services-user">

          <div class="homepage-services-header">
            Melinda-tunnus
          </div>

          <div class="homepage-services-list">

            <a href="https://asetukset.melinda.kansalliskirjasto.fi/" target="_blank" rel="noopener noreferrer"
              title="Avautuu uuteen välilehteen">
              <div class="service-link">
                <div class="service-link-icon icon-arrow">
                  <span class="material-icons">east</span>
                </div>
                <div class="service-link-text">
                  Muuta salasanaa
                  <span class="material-icons service-link-icon open-in-new">open_in_new</span>
                </div>
              </div>
            </a>

            <a href="https://melinda.kansalliskirjasto.fi/users/" target="_blank" rel="noopener noreferrer"
              title="Avautuu uuteen välilehteen">
              <div class="service-link">
                <div class="service-link-icon icon-arrow">
                  <span class="material-icons">east</span>
                </div>
                <div class="service-link-text">
                  Käyttäjänhallinta
                  <span class="material-icons service-link-icon open-in-new">open_in_new</span>
                </div>
              </div>
            </a>

          </div>

        </div>

      </div>

      <!-- Home page contact information and service support -->
      <div class="homepage-contact-and-help">

        <!-- Accordion with help info -->
        <div class="accordion">

          <div id="homepageHelpAccordion" class="accordion-heading">
            <div class="accordion-heading-icon collapsed">
              <span class="material-icons">
                <!-- + icon when accordion is collapsed, - icon when accordion is expanded -->
              </span>
            </div>
            <div class="accordion-heading-text">
              Tarvitsetko apua?
            </div>
          </div>

          <div class="accordion-content info-contact-and-help-content">

            <!-- List of instruction resources -->
            <div class="info-contact-and-help-list">

              <div class="info-contact-and-help-list-heading">
                Ohjeet
              </div>

              <div class="info-contact-and-help-list-items">

                <a href="https://www.kiwi.fi/x/UoL9Ag" target="_blank" rel="noopener noreferrer"
                  title="Avautuu uuteen välilehteen">
                  <div class="contact-and-help-list-item">
                    <div class="list-item-icon">
                      <span class="material-icons">
                        info_outline
                      </span>
                    </div>
                    <div class="list-item-text">
                      Melinda-wikin ohjesivu
                      <span class="material-icons open-in-new">open_in_new</span>
                    </div>
                  </div>
                </a>

                <a href="https://www.kiwi.fi/x/JoHyEw" target="_blank" rel="noopener noreferrer"
                  title="Avautuu uuteen välilehteen">
                  <div class="contact-and-help-list-item">
                    <div class="list-item-icon">
                      <span class="material-icons">
                        info_outline
                      </span>
                    </div>
                    <div class="list-item-text">
                      Tietoa Melinda-kuvailijan aputyökaluista
                      <span class="material-icons open-in-new">open_in_new</span>
                    </div>
                  </div>
                </a>

              </div>

            </div>

            <!-- List of support resources -->
            <div class="info-contact-and-help-list">

              <div class="info-contact-and-help-list-heading">
                Tukipalvelut
              </div>

              <div class="info-contact-and-help-list-items">

                <a href="mailto:melinda-posti@helsinki.fi">
                  <div class="contact-and-help-list-item">
                    <div class="list-item-icon">
                      <span class="material-icons">
                        alternate_email
                      </span>
                    </div>
                    <div class="list-item-text email">
                      melinda-posti@helsinki.fi
                    </div>
                  </div>
                </a>

                <a href="https://www.kiwi.fi/x/oxRiBQ" target="_blank" rel="noopener noreferrer"
                  title="Avautuu uuteen välilehteen">
                  <div class="contact-and-help-list-item">
                    <div class="list-item-icon">
                      <span class="material-icons">
                        info_outline
                      </span>
                    </div>
                    <div class="list-item-text">
                      Lähetä tukipyyntö
                      <span class="material-icons open-in-new">open_in_new</span>
                    </div>
                  </div>
                </a>

                <a href="https://www.kiwi.fi/pages/viewpage.action?pageId=95585192#S%C3%A4hk%C3%B6postilistatjapalvelupostit-S%C3%A4hk%C3%B6postilistat"
                  target="_blank" rel="noopener noreferrer" title="Avautuu uuteen välilehteen">
                  <div class="contact-and-help-list-item">
                    <div class="list-item-icon">
                      <span class="material-icons">
                        info_outline
                      </span>
                    </div>
                    <div class="list-item-text">
                      Liity sähköpostilistalle
                      <span class="material-icons open-in-new">open_in_new</span>
                    </div>
                  </div>
                </a>

                <a href="https://www.kiwi.fi/pages/viewpage.action?pageId=95585192#S%C3%A4hk%C3%B6postilistatjapalvelupostit-Palvelupostit"
                  target="_blank" rel="noopener noreferrer" title="Avautuu uuteen välilehteen">
                  <div class="contact-and-help-list-item">
                    <div class="list-item-icon">
                      <span class="material-icons">
                        info_outline
                      </span>
                    </div>
                    <div class="list-item-text">
                      Kaikki kuvailun palvelupostiosoitteet
                      <span class="material-icons open-in-new">open_in_new</span>
                    </div>
                  </div>
                </a>

              </div>

            </div>

          </div>

        </div>

        <!-- Accordion with contact info -->
        <div class="accordion">

          <div id="homepageContactAccordion" class="accordion-heading">
            <div class="accordion-heading-icon collapsed">
              <span class="material-icons">
                <!-- + icon when accordion is collapsed, - icon when accordion is expanded -->
              </span>
            </div>
            <div class="accordion-heading-text">
              Yhteystiedot
            </div>
          </div>

          <div class="accordion-content info-contact-and-help-content">

            <div class="info-contact-and-help-heading">

              <div class="contact-and-help-heading-icon">
                <img src={{ shared "/images/logo-melinda-favicon-color-cropped.png" }}>
              </div>

              <div class="contact-and-help-heading-text">
                Melinda-palvelu
              </div>

            </div>

            <div class="info-contact-and-help-list">

              <div class="info-contact-and-help-list-items">

                <a href="mailto:melinda-posti@helsinki.fi">
                  <div class="contact-and-help-list-item">
                    <div class="list-item-icon">
                      <span class="material-icons">
                        alternate_email
                      </span>
                    </div>
                    <div class="list-item-text email">
                      melinda-posti@helsinki.fi
                    </div>
                  </div>
                </a>

                <a href="https://www.kiwi.fi/x/RIL9Ag" target="_blank" rel="noopener noreferrer"
                  title="Avautuu uuteen välilehteen">
                  <div class="contact-and-help-list-item">
                    <div class="list-item-icon">
                      <span class="material-icons">
                        info_outline
                      </span>
                    </div>
                    <div class="list-item-text">
                      Kaikki yhteystiedot
                      <span class="material-icons open-in-new">open_in_new</span>
                    </div>
                  </div>
                </a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

    <!-- For displaying info messages and errors to user -->
    <div id="snackbars" class="snackbars"></div>

  </div>

  <!-- ------------------------------------------------------------------------ -->
  <!-- Footer -->
  {{> (shared "footer") }}

</div>