{% extends "base.html" %}

{% block body_attributes %}id="calendar"{% endblock %}
{% block bodyclass %}section-community calendar{% endblock %}
{% block title %}{{ page_title(_('Where is Mozilla?')) }}{% endblock %}

{% set styles = ('calendar',) %}

{% block content %}

<section id="content">
<div class="wrap">

  <section id="content-main" class="full" role="main">
    <header id="page-head">

      <h1>{{ _('Where is Mozilla?') }}</h1>
      <p>
        {% trans %}
        Here you can see some of the developer events at which Mozilla will be
        participating, and the topics on which our Mozillians will be speaking.
        If you are organizing an event and would like a Mozillian to
        participate, please <a href="https://bugzilla.mozilla.org/form.dev-engagement-event">file a bug</a>.
        If you are a Mozillian speaking at an event that's not listed here, or
        if an existing event entry needs updating, <a href="mailto:dev-events@mozilla.com">let us know</a>!
        You can also check out the <a href="https://reps.mozilla.org/events/#/period/future/">Mozilla Reps events</a>
        page to find a Mozilla Reps event near you!
        {% endtrans %}
      </p>
    </header>

{% if waffle.flag('events_map') %}
    <div id="map_canvas" class="boxed"></div>
    <div id="cal1Container"></div>
{% endif %}

    <h2>{{ _('Upcoming Conferences') }}</h2>
    <table id="upcoming" class="events" summary="{{ _('Upcoming conferences featuring Mozilla speakers') }}">
      <thead>
          <th scope="col">{{ _('Start Date') }}<div class="sortIndicator"></div></th>
          <th scope="col">{{ _('End Date') }}<div class="sortIndicator"></div></th>
        <th scope="col">{{ _('Conference') }}<div class="sortIndicator"></div></th>
        <th scope="col">{{ _('Location') }}<div class="sortIndicator"></div></th>
        <th scope="col">{{ _('Attendees') }}<div class="sortIndicator"></div></th>
        <th scope="col">{{ _('Description') }}<div class="sortIndicator"></div></th>
      </thead>
      <tbody>
      {% for event in upcoming_events %}
      <tr>
          <td class="date">{{ event.date.strftime('%Y-%m-%d') }}</td>
          <td>{% if event.end_date %}{{ event.end_date.strftime('%Y-%m-%d') }}{% endif %}</td>
            {% if event.conference_link %}
          <td class="conference"><a href="{{ event.conference_link }}">{{ event.conference }}</a></td>
            {% else %}
          <td class="conference">{{ event.conference }}</td>
            {% endif %}
          <td class="location">{{ event.location }}</td>
          <td class="people">{{ event.people|safe }}</td>
          <td class="description">{{ event.description|safe }}</td>
      </tr>
      {% endfor %}
</tbody></table>
<h2>{{ _('Past Conferences') }}</h2>
<table id="past" class="events"  summary="{{ _('Past conferences that featured Mozilla speakers') }}">
  <thead>
    <th scope="col">{{ _('Start Date') }}<div class="sortIndicator"></div></th>
    <th scope="col">{{ _('End Date') }}<div class="sortIndicator"></div></th>
    <th scope="col">{{ _('Conference') }}<div class="sortIndicator"></div></th>
    <th scope="col">{{ _('Location') }}<div class="sortIndicator"></div></th>
    <th scope="col">{{ _('Attendees') }}<div class="sortIndicator"></div></th>
    <th scope="col">{{ _('Description') }}<div class="sortIndicator"></div></th>
    <th scope="col">{{ _('Presentation Materials') }}<div class="sortIndicator"></div></th>
  </thead>
  <tbody>
      {% for event in past_events %}
      <tr>
          <td>{{ event.date.strftime('%Y-%m-%d') }}</td>
          <td>{% if event.end_date %}{{ event.end_date.strftime('%Y-%m-%d') }}{% endif %}</td>
          <td><a href="{{ event.conference_link }}">{{ event.conference }}</a></td>
          <td>{{ event.location }}</td>
          <td>{{ event.people|safe }}</td>
          <td>{{ event.description|safe }}</td>
          <td>{% if event.materials and event.materials != "n/a" %}<a href="{{ event.materials }}">Presentation Material</a>{% endif %}</td>
      </tr>
      {% endfor %}
</tbody></table>
</section><!-- /#content-main -->

</div>
</section>
{% endblock %}

{% block js %}
{% if waffle.flag('events_map') %}
<script src="https://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key={{ google_maps_api_key }}" type="text/javascript"></script>
{% endif %}
{{ js('events') }}
{% endblock %}