events.html.slim

---
layout: get-involved-base
title: Events featuring Red Hat
description: Discover the events and webinars featuring talks about Red Hat products and upstream projects.
---
.hero.hero-wide.hero-events
  .row
    .large-24.columns
      h2 Events

.row(ng-app="dcp")
  .large-24.columns
    .slider-wrapper
      .slider#slider.slider-side-by-side(data-timeout="3000", data-shuffle="true")
        .swipe-wrap
          .slide
            a(href="http://www.devnation.org/")
              img.mobile(src="http://static.jboss.org/images/rhd/hero/RHDev_eventshero_mobile_devnation_03292016.png" alt="An Open Source Conference, By And For Developers Across The Globe")
              img.desktop(src="http://static.jboss.org/images/rhd/hero/RHDev_eventshero_devnation_desktop_h250_03292015_.png" alt="An Open Source Conference, By And For Developers Across The Globe")      
      .slider-pager
      .slider-controls
        a.slider-prev(data-direction="prev")
          i.icon-angle-left.icon-4x
        a.slider-next(data-direction="next")
          i.icon-angle-right.icon-4x

    h4.events-header#find Find webinars and events within the industry, community or sponsored by Red Hat.

    div(ng-controller="eventsController")
      / .events-control.large-24
      /   form.events-filter.row
      /     .large-8.columns
      /       label(for="region") Region:
      /       select(ng-model="filter.region" ng-options="option.value as option.text for option in filters.regions" ng-change="getEvents()")
      /         option(value="") All
      /     .large-8.columns
      /       label(for="product") Product:
      /       select(ng-model="filter.target_product" ng-options="option.value as option.text for option in filters.products" ng-change="getEvents()")
      /         option(value="") All
      /     .large-8.columns
      /       label(for="product") Solution:
      /       select(ng-model="filter.solution" ng-options="option.value as option.text for option in filters.solutions" ng-change="getEvents()")
      /         option(value="") All

      p(ng-hide="monthKeys.length") Sorry, there are no events to show. Please alter your search criteria.
      .month(ng-repeat="monthKey in monthKeys | orderBy" ng-show="monthKeys.length")
        h2.divider.month-heading
          | {{ monthKey | moment:'MMMM YYYY' }}
        ul.events-listing
          li.event-item(ng-repeat="event in events[monthKey] | orderBy: 'start_date'")
            .event
              .event-head
                img(ng-if="'default' !== event.image" ng-src="http://static.jboss.org/images/rhd/events/event_{{event.image}}.png")
                .event-date(ng-class="{'multiday': event.end_date !== event.start_date}")
                   p
                    span.start(ng-class="{'multimonth': (event.start_date | moment:'MMM') !== (event.end_date | moment:'MMM'), 'same-month': (event.start_date | moment:'MMM') == (event.end_date | moment:'MMM') }")
                      span.month
                        | {{event.start_date | moment:'MMM'}}
                        |  
                      span.day
                        | {{event.start_date | moment:'DD'}}
                      span.end-day
                        | -{{event.end_date | moment:'DD'}}
                    span.end(ng-class="{'same-month': (event.start_date | moment:'MMM') == (event.end_date | moment:'MMM')}")
                      | {{event.end_date | moment:'MMM DD'}}
              .event-body
                h3: a(ng-href="{{event.event_url}}")
                  | {{event.sys_title}}
                p
                  | {{event.sys_description}}
                - if "red hat".casecmp("event.type") == 0
                  p.red-hat-event
                    i.icon-redhat
                    | Red Hat Event
                a.button(ng-href="{{event.event_url}}")
                  | Learn More
                  i.fa.fa-external-link

= javascripts("events", true) do
  script src="#{site.base_url}/javascripts/vendor/picker.js"
  script src="#{site.base_url}/javascripts/vendor/picker.date.js"
  script src="#{site.base_url}/javascripts/vendor/moment.js"
  script src="#{site.base_url}/javascripts/datepicker-init.js"
  script src="#{site.base_url}/javascripts/events.js"