{% extends "demos/base.html" %}
{% set obj = submission %}

{% block pageid %}submit{% endblock %}
{% block bodyclass %}section-demos{% endblock %}
{% block title %}
    {% if edit %}
        {{ page_title(_('{subtitle} | Demo Studio') | f(subtitle=_("Edit {demo_title}") | f(demo_title=submission.title))) }}
    {% else %}
        {{ page_title(_('{subtitle} | Demo Studio') | f(subtitle=_('Submit a New Demo'))) }}
    {% endif %}
{% endblock %}

{% macro li_field(form, field_name, classes='', note='', image=False, show_label=True) %}
    {% set field = form[field_name] %}
    <li id="field_{{field_name}}" class="field {{ 'type_%s' % field.field.widget.input_type if field.field.widget.input_type }}{{ ' required' if field.field.required }}{{ ' error' if field.errors }} {{classes}}">
        {% if show_label %}
            <label for="id_{{field_name}}">{{field.label}}</label>
        {% endif %}
        {{ field|safe }}
        {% if edit %}
            {% if 'file' == field.field.widget.input_type and obj[field_name] %}
                {% if image %}
                    <p><img width="360" class="current_file" src="{{obj[field_name].url}}" /></p>
                {% else %}
                    {# <span class="current_file">{{ obj[field_name] }}</span> #}
                {% endif %}
            {% endif %}
        {% endif %}
        {% if note %}
            <p class="note">{{ note }}</p>
        {% endif %}
        {{ field.errors|safe }}
    </li>
{% endmacro %}

{% block content %}
<section id="content">
<div class="wrap">

  <header id="demos-head">
    <h1><a href="{{ url('demos') }}">{{_("Mozilla Demo Studio")}}</a></h1>
  </header>

  <section id="content-main" role="main">
    <header id="page-head" class="form">
      <h1 class="page-title">
        {% if edit %}
            {{_("Edit {demo_title}") | f(demo_title=submission.title)}}
        {% else %}
            {{_("Submit a New Demo")}}
        {% endif %}
      </h1>

    {% if not edit %}
    {% trans %}
        <p>Whether you are creating an amazing new way to experience the Web or just 
        experimenting with the latest technologies, we invite you to submit your own 
        demos to share with (or show off to) other web developers.</p>
        <p>Please complete the form below to ensure your demo is submitted to the 
        Demo Studio successfully.</p>
    {% endtrans %}
    {% endif %}
    </header>

    <aside id="update-profile" class="module aside">
      <h1 class="mod-title">{{_('Update Your Profile')}}</h1>
      {% trans %}
      <p>Share your developer interests and areas of expertise with the MDN 
      community. We'll be able to bring you a better, more customized experience 
      and you will have a place to show off the amazing work you do.</p>
      {% endtrans %}
      <p><a href="{{ url('devmo_profile_view', username=request.user.username) }}" class="go">{{_("Go to your profile")}}</a></p>
    </aside>

    <form enctype="multipart/form-data" action="" method="POST" id="demo-submit" class="submission">
      {{ csrf() }}
      <fieldset class="section">
        <legend><b>{{_('Describe Your Demo')}}</b></legend>

        {% trans %}    
            <p>Tell us more about your demo, including the name, description and the 
            technologies used. Please list the browsers you have tested it with.</p>
        {% endtrans %}

        <ul>
          {{ li_field(form, 'title') }}
          {{ li_field(form, 'summary') }}
          {{ li_field(form, 'description') }}

          {{ li_field(form, 'hidden') }}

          <fieldset class="inline">
              <legend><b>{{_('Select up to five technologies used in your demo.')}}</b></legend>
              <ul id="tech-tags" class="cols-4">
                {{ li_field(form, 'tech_tags', show_label=False) }}
              </ul>
          </fieldset>

	  {% if form.fields.challenge_tags %}
          <fieldset id="devderby-submit" class="inline">
              <legend><b>
              {% trans derby_url = url('demos_devderby_landing') %}
                  Submit your demo to the <a href="{{ derby_url }}" onclick="window.open(this.href);return false;">Dev Derby</a>!
              {% endtrans %}
              </b></legend>
              <a href="{{url('demos_devderby_landing')}}" onclick="window.open(this.href);return false;">
                <img class="derby-logo" src="{{ MEDIA_URL }}img/devderby/logo-devderby-sm.png" alt="" width="190" height="60"/>
              </a>
              <p>{{_("Check the appropriate Dev Derby box and make sure you select the relevant technologies above to be considered for the developer challenge.")}}</p>
              <ul id="challenge-tags">
                {{ li_field(form, 'challenge_tags', show_label=False) }}
              </ul>
                <div class="notice">
                    <p>Each Derby ends at 11:59:59 p.m. PT on the last day of its month.</p>
                </div>
          </fieldset>
	  {% endif %}

        </ul>

      </fieldset>

      <fieldset class="section">
          <legend><b>{{_('Show Off Your Demo')}}</b></legend>
            <ul>
                <li id="field_screenshots" class="field">
                    <fieldset class="inline">
                      <legend><b>{{_('Provide at least one screenshot of your demo in action')}}</b></legend>
                        <ul class="screenshots">
                            {{ li_field(form, 'screenshot_1', image=True) }}
                            {{ li_field(form, 'screenshot_2', image=True) }}
                            {{ li_field(form, 'screenshot_3', image=True) }}
                            {{ li_field(form, 'screenshot_4', image=True) }}
                            {{ li_field(form, 'screenshot_5', image=True) }}
                        </ul>
                    </fieldset>
                    <p class="note">{{_('JPEG and PNG supported. Minimum size of 480x360.')}}</p>
                </li>
                {{ li_field(form, 'video_url', note=_('We support YouTube and Vimeo')) }}
                {{ li_field(form, 'navbar_optout', note=_('If your demo has problems when displayed in an <iframe>, try changing this.')) }}
            </ul>
      </fieldset>

      <div id="prepare-demo" class="module aside notes">
        <h3 class="mod-title">{{_('Preparing Your Demo')}}</h3>
        {% trans signup_url=url('users.register') %}
        <ul>
          <li>Your demo's source code should be packaged inside a ZIP file.</li>
          <li>The main page of your demo should be a file named <code>index.html</code> in the root of the ZIP.</li>
          <li>Your demo should be built on client-side technology (HTML, CSS, JavaScript). Server-side languages like PHP and Ruby are not supported.</li>
          <li>If your demo requires external resources, it should use AJAX to access them.</li>
          <li>To submit your demo, you need an <a href="{{signup_url}}">MDN account</a>.</li>
          <li>Please identify in the demo details box any 3rd party content that can't be licensed under the CC-BY-SA license and include links to the authors' websites.</li>
        </ul>
        {% endtrans %}
      </div>

      <fieldset class="section">
        <legend><b>{{_('Provide the Source Code')}}</b></legend>
        {% if form.fields.demo_package %}
        {% trans %}
            <p>Upload a ZIP file of your source code, in which the main page of your
            demo is named <code>index.html</code> in the root directory.</p>
        {% endtrans %}
        {% else %}
            <div class="notice">
                <p>You cannot edit your source code since the Dev Derby submission
                deadline has passed, but you may add or update the link and license.</p>
            </div>
        {% endif %}
        <ul>
	  {% if form.fields.demo_package %}
          {{ li_field(form, 'demo_package') }}
	  {% endif %}
          {{ li_field(form, 'source_code_url') }}
          {{ li_field(form, 'license_name') }}
        </ul>
      </fieldset>


      {% if not edit %}
      <fieldset class="section notitle">
        <ul>
          {{ li_field(form, 'captcha') }}
          <li id="field_accept_terms" class="check field{{ ' error' if form.accept_terms.errors }}">
          <strong class="label">
            <label>
                {{ form.accept_terms|safe }} 
                {% trans terms_url=url('demos_terms') %}
                    I accept the 
                    <a href="{{ terms_url }}#tfc">Terms for Contributors</a> and 
                    <a href="{{ terms_url }}#rrd">Rights Representation Details</a>
                {% endtrans %}
            </label> 
           </strong>
           {{ form.accept_terms.errors|safe }}
          </li>
        </ul>
      </fieldset>
      {% endif %}

     <p class="fm-submit"> 
        {% if not edit %}
            <button type="submit" name="action_create">{{ _("Submit demo") }}</button>
            {{_('or')}} <a href="{{ url('demos') }}">{{_('Discard Demo')}}</a>
        {% else %}
            <button type="submit" name="action_edit">{{ _("Save changes") }}</button>
            or <a href="{{ url('demos_detail', slug=submission.slug) }}">{{_('Discard Changes')}}</a>
        {% endif %}
     </p>
      
    </form>

  </section>

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

{% block js %}
{{ super() }}

<script type="text/javascript">
// <![CDATA[
	$(document).ready(function(){
		$("#tech-tags input[type=checkbox]").click(function(){
		  var count = $("#tech-tags input[type=checkbox]:checked").length >= 5;
		  $("#tech-tags input[type=checkbox]").not(":checked").attr("disabled",count);

		  $("#tech-tags input[type=checkbox]").each(function(){
		    if ($(this).is(":disabled")) {
		      $(this).parents("label").addClass("disabled");
		    }
		    else {
		      $(this).parents("label").removeClass("disabled");
		    }
		  });

		});
	});	
// ]]>
</script>

<script type="text/javascript">
// <![CDATA[

  /* Add isChildOf method to determine if the element is a descendant of another specified element.
   * Usage: $(element).isChildOf(filter_string)
   */
  (function($) {
    $.fn.extend({
      isChildOf: function( filter_string ) {    
        var parents = $(this).parents().get(); 
        for ( j = 0; j < parents.length; j++ ) {
          if ( $(parents[j]).is(filter_string) ) {
            return true;
          }
        }  
        return false;
      }
    });
  })(jQuery);

	$("input.filebutton").each(function(){
    var text = $(this).attr("title");
    var file = $(this).val();

    if ( $(this).isChildOf(".fileslist") ) {
      $(this).closest("p").addClass("replaced").append('<div class="replacement"><span class="button">'+text+'</span></div>');
    }
    else {
		  $(this).closest("li, p").addClass("replaced").append('<div class="replacement"><span class="button">'+text+'</span><input class="filename" type="text" readonly="readonly" value="'+file+'"></div>');
      $(this).change(function(){
        var file = $(this).val();
        $(this).closest("li, p").find(".filename").attr("value",file);
      });
    }
	});
	
// ]]>
</script>

{% endblock %}