{% extends "base.html" %}

{% block title %}The Blue Alliance - Add Match Video{% endblock %}

{% block meta_description %}Add match videos to The Blue Alliance.{% endblock %}

{% block content %}
<div class="container">
  {% if status %}
  <div class="row">
    <div class="col-xs-12 col-lg-6 col-lg-offset-3">
      {% if status == 'success' %}
      <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4>Thanks!</h4>
        <p>We'll review your suggestion and get it added to the site soon!</p>
      </div>
      {% elif status == 'video_exists' %}
      <div class="alert alert-info">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4>Thanks!</h4>
        <p>The video you submitted has already been approved!</p>
      </div>
      {% elif status == 'suggestion_exists' %}
      <div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4>Thanks!</h4>
        <p>The video you submitted is already pending review!</p>
      </div>
      {% else %}
      <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4>Uh oh!</h4>
        <p>Sorry, but we are currently unable to recognize the URL you submitted. Please make sure you submitted a valid YouTube link.</p>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}
  <div class="row">
    <div class="col-xs-12 col-lg-6 col-lg-offset-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Help others by adding videos!</h1>
        </div>
        <div class="panel-body">
          <p>Thanks for helping make The Blue Alliance better! Let us know about videos so we can add them to the site! Do you have a playlist with many videos for this event? Input them all on <a href="/suggest/event/video?event_key={{ event.key_name }}">this page</a>!</p>
          <ul>
            <li>Your suggestion will be reviewed by a moderator</li>
            <li>Your account info (like {{user_bundle.user.email()}} and {{user_bundle.user.nickname()}}) will also be submitted. <a href="{{user_bundle.logout_url}}">log in as a different user</a></li>
          </ul>
          <hr>
          <h3>{{match.verbose_name}} - {{event.year}} {{event.name}}</h3>
          {% if match.youtube_videos %}
          <p>Videos on The Blue Alliance</p>
          {% for youtube_video in match.youtube_videos %}
            <iframe width="240" height="180" src="https://www.youtube.com/embed/{{youtube_video}}?rel=0" frameborder="0" allowfullscreen></iframe>
          {% endfor %}
          <h4>Add another video</h4>
          {% endif %}
          <form action="/suggest/match/video" method="post">
            <input name="match_key" type="hidden" value="{{match.key.id()}}" />
            <div class="input-group">
              <input class="form-control" type="text" name="youtube_url" placeholder="https://www.youtube.com/watch?v=MQ0VNzIvHx0" value="" />
              <span class="input-group-btn">
                <button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-plus-sign"></span> Add Video</button>
              </span>
            </div>
          </form>
          <br>
          <p><a class="btn btn-primary" href="https://www.youtube.com/results?search_query={{match.verbose_name|urlencode}}+{{event.year}}+{{event.name|urlencode}}" target="_blank"><span class="glyphicon glyphicon-search"></span> Search YouTube :: {{match.verbose_name}} - {{event.year}} {{event.name}}</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
