<!-- Polymer Library -->
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">

<!-- BS4 Polymer -->
<link rel="import" href="../../../node_modules/bs4-polymer/dist/shared-styles/bs4-grid/bs4-grid.html">

<!-- Elements -->
<link rel="import" href="../elements/rmc-jumbotron.html">
<link rel="import" href="../elements/rmc-carousel.html">
<link rel="import" href="../elements/rmc-feature-cards.html">

<!-- Mixins -->
<link rel="import" href="../mixins/rmc-loading-mixin.html">

<!-- Shared Styles -->
<link rel="import" href="../shared-styles/rmc-shared-styles-views.html">

<!--
`<view-home>` is the view for the home page.

In typical use, add the element to an `<iron-pages>` element:

    <iron-pages
        selected="[[page]]"
        attr-for-selected="id"
        role="main">
        
        <view-home id="home"></view-home>
        ...
    </iron-pages>
-->
<dom-module id="view-home">
  <template>
    <style include="bs4-shared-styles-grid"></style>
    <style include="rmc-shared-styles-views">
        rmc-carousel {
          width: 100%;
          max-height: 400px;
          contain: content;
          position: relative;
          overflow: hidden;
          margin-top: 56px; /* fixed navbar height */
        }

        rmc-carousel::after {
          display: block;
          content: '';
          padding-top: 50%; /* 2:1 = height is 50% of width */
        }
        
        /* center image inside carousel */
        rmc-carousel img {
          position: absolute;
          top: -9999px;
          bottom: -9999px;
          left: -9999px;
          right: -9999px;
          margin: auto;
        }
        
        .container {
          /* remove fixed navbar height from rmc-shared-styles-views */
          margin-top: 0;
        }
        
        @media print {
          rmc-carousel {
            display: none;
          }
        }
    </style>
    
    <rmc-carousel>
      <img data-src="app/images/carousel/slide1.jpg" alt="">
      <img data-src="app/images/carousel/slide2.jpg" alt="">
      <img data-src="app/images/carousel/slide3.jpg" alt="">
    </rmc-carousel>
    
    <!-- container -->
    <div class="container">
    
        <!-- jumbotron -->
        <rmc-jumbotron title="The Rogers Manufacturing Company"
                       text="Manufacturing Company Established in 1891."
                       button="Learn more"
                       link="/about/"></rmc-jumbotron>

        <!-- feature cards -->
        <rmc-feature-cards loading="{{loading}}"></rmc-feature-cards>
        
    </div>
    <!-- /container -->
    
  </template>

  <script>
    /* eslint new-cap: [2, {"capIsNewExceptions": ["RMCLoadingMixin"]}] */
    /* global RMCLoadingMixin */
    
    /**
     * Class representing home view.
     * @appliesMixin RMCLoadingMixin
     */
    class ViewHome extends RMCLoadingMixin(Polymer.Element) {
      /** HTML tag name. */
      static get is() {
        return 'view-home';
      }
    }
    window.customElements.define(ViewHome.is, ViewHome);
  </script>
</dom-module>
