/**
@license
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

import { html } from '@polymer/lit-element';
import { PageViewElement } from './page-view-element.js';

// These are the shared styles needed by this element.
import { SharedStyles } from './shared-styles.js';
import { ButtonSharedStyles } from './button-shared-styles.js';

// Import paper elements
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-button/paper-button.js';

class MaoHome extends PageViewElement {
  _render(props) {
    return html`
    ${SharedStyles}
    ${ButtonSharedStyles}

    <style>
      paper-card {
        width: 100%;
        display: block;
      }

      .welcomeCard {
        margin-top: 5px;
        text-align: center;
      }

      .info {
        font-weight: bold;
      }

      .home-grid {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: 1fr;
      }

      @media (min-width: 460px) {
        .home-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
    </style>

      <section class="img-section">
        <div class="container">
          <img src="http://www.advancedroofingandsheetmetal.com/wp-content/uploads/2016/02/community-school-naples.jpg" alt="Maths">
          <div class="centered">We &hearts; Math At CSN</div>
        </div>
      </section>

      <section>
        <div class="home-grid">
          <paper-card elevation=0>
            <div class="card-content">
              <h2 class="underline">
                Announcements
              </h2>
              <p>
                Welcome to the beta release of the website. We have high hopes for this website.
              </p>
              <p>
                If you haven't yet, please add this to your home screen. It will act like an app. Cool!
              </p>
            </div>
          </paper-card>

          <paper-card elevation=0>
            <div class="card-content">
              <h2 class="underline">
                Meeting Dates
              </h2>
              <p>
                We will meet once a week on <strong>D Day Flex</strong>.
              </p>
            </div>

            <div class="card-actions">
              <div>
                <h3>Upcoming Dates</h3>
                <ul>
                  <li>First Meeting:\tSeptember 12th</li>
                  <li><strong>Welcome Letter Due</strong>:\tSeptember 28th</li>
                </ul>
              </div>
            </div>
          </paper-card>
        </div>

        <paper-card elevation=0 class='welcomeCard'>
          <div class="card-content">
            <h2 class="underline">
              Welcome Letter
            </h2>
            <p>
              Welcome Letters mark the beginning of each MAO year. Please read it and complete it by September 28th.
            </p>
          </div>
          <div class="card-actions">
            <a href="https://drive.google.com/open?id=1mnDjeSlxE6aXzTbPwr4JW7KRV6GlaYaV" target="_blank"><paper-button class="info" raised>Welcome Letter</paper-button></a>
          </div>
        </paper-card>

      </section>
    `;
  }

}

window.customElements.define('mao-home', MaoHome);