<?php
/*******************************************************************************
 * Copyright (c) 2017 Eclipse Foundation and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *    Christopher Guindon (Eclipse Foundation) - Initial implementation
 *    Eric Poirier (Eclipse Foundation)
 *******************************************************************************/

// Get Oxygen Content
$oxygen_content_items = json_decode(file_get_contents("oxygen-content.json"), TRUE);

?>

<div class="oxygen-header">
  <div class="container">
    <h1 class="sr-only">Oxygen</h1>
      <h2 class="release-date">June 28, 2017</h2>
      <?php //foreach ($links['links'] as $link): ?>
       <!--  <a class="btn btn-xl btn-oxygen hidden-xs hidden-sm hidden-md" href="<?php //print $link; ?>">Download</a> -->
      <?php //endforeach;?>
  </div>
</div>

<div class="oxygen-stats">
  <div class="container">
    <div class="row">
      <?php foreach ($oxygen_content_items['stats'] as $item) :?>
      <div class="col-sm-6 col-xs-12 stats-item">
        <div class="row">
          <div class="col-xs-10 col-sm-12 padding-right-10">
            <img class="img-responsive" src="<?php print $item['image_url']; ?>" alt="<?php print $item['image_alt']; ?>">
          </div>
          <div class="col-xs-14 col-sm-12 padding-left-0">
            <p class="stats-item-number">
              <span class="stats-item-digit"><?php print $item['number']; ?></span>
              <?php print isset($item['number_suffix']) ? $item['number_suffix'] : ""; ?>
            </p>
            <p class="stats-item-title"><?php print $item['title']; ?></p>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>

<div class="oxygen-key-features">
  <div class="container text-center">
    <!-- <h2 class="oxygen-subtitle">Key Features</h2>
    <div class="row">
      <?php //$i = 1; ?>
      <?php //foreach ($oxygen_content_items['key_features'] as $item) :?>
        <div class="col-sm-8 key-features-item">
          <img alt="<?php// print $item['image_alt']; ?>" src="<?php //print $item['image_url']; ?>">
          <h3 class="key-features-item-title"><?php //print $item['title']; ?></h3>
          <p><?php //print $item['text']; ?></p>
        </div>
        <?php //if ($i === 3) :?>
          </div>
          <div class="row">
        <?php //endif; ?>
        <?php //$i++ ?>
      <?php //endforeach; ?>
    </div> -->

    <ul class="list-inline">
      <li><a href="https://www.eclipse.org/downloads/eclipse-packages/" class="btn btn-oxygen btn-lg">Packages</a></li>
      <!-- <li><a href="#" class="btn btn-oxygen btn-lg">Resources</a></li> -->
      <li><a href="https://projects.eclipse.org/releases/oxygen" class="btn btn-oxygen btn-lg">Projects</a></li>
      <!-- <li><a href="#" class="btn btn-oxygen btn-lg">New and Noteworthy</a></li> -->
    </ul>
  </div>
</div>

<div class="oxygen-slideshow">
  <div id="oxygen-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <?php $number_of_items = count($oxygen_content_items['slideshow']) - 1;?>
      <?php for($i = 0; $i <= $number_of_items; $i++): ?>
        <li data-target="#oxygen-carousel" data-slide-to="<?php print $i; ?>" <?php print $i === 0 ? 'class="active"' : ''; ?>></li>
      <?php endfor; ?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <?php foreach ($oxygen_content_items['slideshow'] as $item) : ?>
        <div class="item slideshow-item <?php print isset($item['active']) ? $item['active'] : ""; ?>">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                <h2 class="oxygen-subtitle"><?php print $item['title']; ?></h2>
                <p class="slideshow-item-text"><?php print $item['text']; ?></p>
              </div>
              <div class="col-md-16">
                <img class="img-responsive" src="<?php print $item['image_url']; ?>" alt="<?php print $item['image_alt']; ?>">
              </div>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#oxygen-carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#oxygen-carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>


<div class="oxygen-webinars">
  <div class="container">
    <h2 class="oxygen-subtitle">Webinars</h2>
    <div class="row">
      <div class="col-md-5 text-center">
        <div class="hidden-xs webinars-icon-wrapper"><img class="webinars-icon img-responsive" src="/oxygen/public/images/webinars-icon.png"></div>
        <p class="webinars-icon-text">Join the Virtual Eclipse Community MeetUp (vECM). Learn from the experts and
            discover what's new in the Eclipse Oxygen Release Train (June 28). Register
            today! It's free. <strong class="orange">#VirtualEclipse</strong></p>
      </div>
      <div class="col-md-19">
        <?php foreach ($oxygen_content_items['webinars'] as $item) :?>
          <div class="row webinars-item">
            <div class="col-sm-6">
              <p class="oxygen-item-date"><?php print $item['date']; ?></p>
            </div>
            <div class="col-sm-8">
              <p class="webinars-item-text"><?php print $item['text']; ?></p>
              <p class="webinars-item-text"><?php print $item['time']; ?></p>
              <p class="webinars-item-speaker"><?php print $item['speaker']; ?></p>
            </div>
            <div class="col-sm-10">
              <p><a class="btn btn-oxygen" href="<?php print $item['button_link']; ?>"><?php print $item['button_title']; ?></a></p>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</div>

<div class="oxygen-news">
  <div class="container">
    <h2 class="oxygen-subtitle">News and Social Media</h2>
    <div class="row">
      <div class="col-md-18">
        <?php $count = count($oxygen_content_items['news']) - 1; ?>
        <?php foreach ($oxygen_content_items['news'] as $key => $item) :?>
          <div class="row news-item">
            <div class="col-sm-6">
              <p class="oxygen-item-date"><?php print $item['date']; ?></p>
            </div>
            <div class="col-sm-18">
              <p class="margin-bottom-0"><a class="news-item-link" href="<?php print $item['title']['link']?>"><?php print $item['title']['text']?></a></p>
              <p><?php print $item['text']?></p>
              <?php if ($key == $count): ?>
                <p class="margin-top-20"><a class="btn btn-oxygen" href="/community/news/eclipsenews.php">Read More</a></p>
              <?php endif; ?>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
      <div class="col-md-6">
        <h3 class="news-item-twitter-title">#EclipseOxygen</h3>
        <div class="news-item-twitter">
          <a class="twitter-timeline"
          data-dnt="true"
          href="https://twitter.com/hashtag/EclipseOxygen"
          data-widget-id="859841735580692481"
          data-chrome="noheader transparent noscrollbar nofooter"
          data-link-color="#69c1bd"
          data-show-replies="false"
          data-height="300"
          data-theme="dark">#EclipseOxygen Tweets</a>
          <script>
            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
            if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
          </script>
        </div>
      </div>
    </div>
  </div>
</div>