{%- extends config.BASE_TEMPLATE %}

{% macro experiment_panel(name, description, endpoint, show_link) %}
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="col-md-2">
        <a href="{{ url_for(endpoint, experiment=name) if show_link else '#' }}">
          <img src="{{ url_for('static', filename='img/' + name + '.gif') }}"
                alt="{{ name }}" style="width: 100%;">
        </a>
      </div>
      <div class="col-md-10">
        {{ description|safe }}
      </div>
    </div>
    <div class="panel-footer text-right">
    {%- if show_link %}
      <a href="{{ url_for(endpoint, experiment=name) }}"
          class="btn btn-sm btn-default">
        {{ _('Explore %(name)s', name=name) }}
        <i class="fa fa-chevron-right"></i>
      </a>
    {%- else %}
      <span class="small text-muted">{{ _('Not yet available') }}</span>
    {%- endif %}
    </div>
  </div>
{% endmacro %}

{% macro img_panel(url, src, text) %}
<div class="panel panel-default">
  <a href="{{ url }}">
    <div style="background-image: url({{ src }}); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; height: 24vh; width: 100%;"></div>
  </a>
  <div class="panel-footer">
    <a href="{{ url }}" class="btn btn-default btn-block">
      {{ text }} <i class="fa fa-chevron-right"></i>
    </a>
  </div>
</div>
{% endmacro %}

{%- block page_body %}
  <section id="main" class="homepage-frame">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div id="edu" class="panel panel-default">
            <div class="panel-body">
              <h2>{{ _('Education') }}</h2>
              <hr/>
              <p class="lead">
                {{ _('Visualise events, check reconstructed data, run tools or build your own!') }}
              </p>
            </div>
            <div class="panel-footer">
              <a class="btn btn-primary btn-lg btn-block" href="#education">{{ _('Start learning') }}</a>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-md-offset-4">
          <div id="rsch" class="panel panel-default">
            <div class="panel-body">
              <h2>{{ _('Research') }}</h2>
              <hr/>
              <p class="lead">
                {{ _('Get the genuine working environments, virtual machines and datasets to start your research.') }}
              </p>
            </div>
            <div class="panel-footer">
              <a class="btn btn-info btn-lg btn-block" href="#research">{{ _('Start analysing') }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="education" class="homepage-frame">
    <div class="entry-frame-header">
      <h1><div class="container">Education</div></h1>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-xs-12">
          {% for name, description, show_link in config.OPENDATA_EDUCATION %}
            {{ experiment_panel(name, description, '.education', show_link) }}
          {% endfor %}
        </div>
        <div class="col-sm-6 col-xs-12">
          <p>
            {{ _('For education purposes, the complex primary data need to be processed into a format (examples below) that is good for simple applications.Get in touch if you wish to build your own applications similar to those shown here.') }}
          </p>
          <div class="row">
            <div class="col-md-6">
              {{ img_panel(
                url_for('.visualise_events', experiment='CMS'),
                url_for('static', filename='img/visualisation/event.png'),
                _('Visualise events')
              ) }}
            </div>
            <div class="col-md-6">
              {{ img_panel(
                url_for('.visualise_histo', experiment='CMS'),
                url_for('static', filename='img/visualisation/histogram.png'),
                _('Visualise histograms')
              ) }}
            </div>
            <div class="col-md-12">
              {{ img_panel(
                url_for('.resources'),
                url_for('static', filename='img/resources/learning.jpg'),
                _('Learning Resources')
              ) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="research" class="homepage-frame">
    <div class="entry-frame-header">
      <h1><div class="container">{{ _('Research') }}</div></h1>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-xs-12">
          {% for name, description, show_link in config.OPENDATA_RESEARCH %}
            {{ experiment_panel(name, description, '.research', show_link) }}
          {% endfor %}
        </div>
        <div class="col-sm-6 col-xs-12">
          <p>
            {{ _('For research purposes, specific software environments and tools need to be deployed to analyse these complex primary data. In addition to the data below, you will find instructions for setting up your working environments here.') }}
          </p>
          <div class="row">
            <div class="col-md-12">
              {{ img_panel(
                url_for('.vm'),
                url_for('static', filename='img/resources/VMs.jpg'),
                _('Install your Virtual Machine')
              ) }}
            </div>
            <div class="col-md-12">
              {{ img_panel(
                url_for('.get_started'),
                url_for('static', filename='img/default.png'),
                _('Start analysing the data')
              ) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{%- endblock %}
