/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

import {LitElement, html, css, unsafeCSS} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import { breakpoints } from '../../breakpoints';

@customElement('iu-footer')

export class Footer extends LitElement {
  static override styles = css`
    :host{
      display: block;
      position: relative;
      background: var(--iu-color-black);
      color: #fff;
      padding-bottom: var(--iu-spacing-6);
      font: var(--iu-f-0);
    }
    @media ${unsafeCSS(breakpoints.md)} {
        :host{
            font: var(--iu-f-1);
        }
    }
    .logo{
        display: flex;
        margin-bottom: var(--iu-spacing-7);
        padding-top: var(--iu-spacing-5);
    }
    .logo p{
        font: var(--iu-f-2);
        margin: 0;
        transform: translateY(-0.5rem);
    }
    .logo p span{
        display: block;
    }
    .logo svg{
        width: 1.875rem;
        margin-right: var(--iu-spacing-2);
    }
    @media ${unsafeCSS(breakpoints.md)} {
        .logo{
            padding-top: var(--iu-spacing-3);
        }
        .logo svg{
            display: none;
        }
        .logo p{
            font: var(--iu-f-1);
            font-weight: bold;
            transform: translateY(0);
        }
        .logo p span{
            display: inline;
        }
    }
    .nav{
        margin-bottom: 0;
    }
    .colophon{
        border-top: 1px solid #fff;
        margin-top: var(--iu-spacing-7);
        padding-top: var(--iu-spacing-3);
    }
  `;

  @property({ type: Boolean }) colophon?: false;

  override render() {
    return html`
        <iu-container class="logo">
            <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 175"><path d="M18.734 20.694V18.19h5.033V2.505h-5.033V0h13.477v2.505h-5.033V18.19h5.033v2.504H18.734ZM10.752 34.531H.976v3.08h9.774v-3.08ZM30.337 34.531h-9.774v3.08h9.774v-3.08ZM49.973 34.531h-9.817v3.08h9.817v-3.08ZM25.479 72.43c-4.825 0-6.448-1.767-6.448-6.324V51.447h3.411v15.11c0 2.464 1.123 3.203 3.037 3.203 1.747 0 3.036-.657 3.036-3.203v-15.11h3.41v14.659c0 4.393-1.996 6.323-6.405 6.323h-.041ZM10.752 85.98H.976v3.081h9.774v-3.08ZM30.337 85.98h-9.774v3.081h9.774v-3.08ZM49.973 85.98h-9.817v3.081h9.817v-3.08ZM30.046 123.55l-1.04-4.311h-7.071l-1.04 4.311h-3.66l5.99-20.654h4.491l5.99 20.654h-3.66Zm-4.576-18.765-2.87 11.702h5.74l-2.87-11.702ZM10.752 137.388H.976v3.08h9.774v-3.08ZM30.337 137.388h-9.774v3.08h9.774v-3.08ZM49.973 137.388h-9.817v3.08h9.817v-3.08ZM27.57 175H23.37l-6.572-20.694h3.868l4.825 18.518 4.825-18.518h3.827L27.57 175Z" fill="#fff"/></svg>
            <p><span>Università</span> Iuav di Venezia</p>
        </iu-container>
        <iu-container class="nav" columns="4">
            <slot name="column"></slot>
        </iu-container>
        ${this.colophon && html`
            <iu-container class="colophon">
                <slot name="colophon"></slot>
            </iu-container>
        `}
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-footer': Footer;
  }
}