/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {LitElement, css, html} from 'lit';
import {customElement} from 'lit/decorators.js';
import {SHARED_STYLES} from '../css/shared-css.js';

@customElement('chromedash-footer')
export class ChromedashFooter extends LitElement {
  static get styles() {
    return [
      ...SHARED_STYLES,
      css`
        footer {
          background: var(--page-background);
          box-shadow: 0 -2px 5px var(--shadow-color);
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          align-items: center;
          padding: var(--content-padding-half);
          position: relative; /* Ensure the z-index has an effect so the box-shadow appears. */
          z-index: 800;
        }

        footer div > * + * {
          margin-left: var(--content-padding);
          padding-left: var(--content-padding);
        }

        #footer-spacer {
          display: none;
          height: calc(28px + var(--content-padding-half));
        }

        @media only screen and (min-width: 601px) and (min-height: 601px) {
          footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
          }

          #footer-spacer {
            display: block;
          }
        }
      `,
    ];
  }

  render() {
    return html`
      <div id="footer-spacer"></div>
      <footer>
        <div>
          <a
            href="https://github.com/GoogleChrome/chromium-dashboard/wiki/"
            target="_blank"
            rel="noopener"
            >Help</a
          >
          <a
            href="https://groups.google.com/a/chromium.org/forum/#!newtopic/blink-dev"
            target="_blank"
            rel="noopener"
            >Discuss</a
          >
          <a
            href="https://github.com/GoogleChrome/chromium-dashboard/issues"
            target="_blank"
            rel="noopener"
            >File an issue</a
          >
          <a
            href="https://policies.google.com/privacy"
            target="_blank"
            rel="noopener"
            >Privacy</a
          >
        </div>
      </footer>
    `;
  }
}
