{% extends "projects/base.html" %}
{% load i18n %}
{% load txcommontags %}
{% load addons %}

{% block title %}
{% if not component %}{{ block.super }} | {{ project.name }} | {% trans "Add a component" %}
{% else %}{{ block.super }} | {{ project.name }} | {% blocktrans with component.name as component_name %}Edit {{ component_name }}{% endblocktrans %}
{% endif %}{% endblock %}

{% block breadcrumb %}{{ block.super }} &raquo; <a href="{{ project.get_absolute_url }}">{{ project.name }}</a> &raquo;
{% if not component %}{% trans "Add a component" %}
{% else %}{% blocktrans with component.name as component_name %}Edit Component '{{ component_name }}'{% endblocktrans %}
{% endif %}{% endblock %}

{% block extra_head %}
  <link type="text/css" href="{{ STATIC_URL }}css/ui.tabs.css" rel="stylesheet" />
  <script type="text/javascript" src="{{ STATIC_URL }}js/ui.core.min.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/ui.tabs.min.js"></script>
<script type="text/javascript">
triggers = new Object();
{% for subform in unit_subforms %}{% for trigger in subform.triggers %}triggers["{{ trigger }}"] = "sub_{{ subform.id }}";
{% endfor %}{% endfor %}
prefaces = new Array({% for subform in unit_subforms %}"sub_{{ subform.id }}"{% if not forloop.last %}, {% endif %}{% endfor %});

// Create a array based on settings.BRANCH_SUPPORT
branch_support = new Object();
{% for entry, value in branch_support.items %}
branch_support["{{ entry }}"] = {{value|lower}};
{% endfor %}

function on_change_type(obj){
    on = triggers[obj.attr("value")];
    for (prefix in prefaces)
    {
        off = prefaces[prefix];
        if (off == on)
        {
            continue;
        };
        $("[id^='" + off + "']").hide();
    }
    $("[id^='" + on + "']").show();

    // Show/hide the branch field based on the settings.BRANCH_SUPPORT
    if (branch_support[obj.attr("value")]){
        $("input[id='branch']").parents('tr:eq(0)').show();
    }else{
        $("input[id='branch']").parents('tr:eq(0)').hide();
        $("input[id='branch']").attr('value','');
    }
}

function toggle_submission_status() {
    if ($("#id_allows_submission").is(":checked")) {
        $("#id_submission_type").removeAttr("disabled");
    } else {
        $("#id_submission_type").attr("disabled", true);
    }
}

$(document).ready(
    function (){
        // Unit Subforms
        $("#id_unit-type").bind("change", function (){
            on_change_type($("#id_unit-type"));
        });
        on_change_type($("#id_unit-type"));

        // Submission forms
        $("#id_allows_submission").bind("change", function (){
            toggle_submission_status();
        });
        toggle_submission_status();
    });

</script>
{% endblock %}

{% block content_title %}
  {% if not component %}
    <h2 class="pagetitle">{% blocktrans with project.name as project_name %}New component for {{ project_name }}{% endblocktrans %}</h2>
  {% else %}
    <h2 class="pagetitle">{% blocktrans with component.name as component_name %}Edit Component '{{ component_name }}'{% endblocktrans %}</h2>
  {% endif %}
{% endblock %}

{% block content %}
  <div class="component_create generic_form">
  {% if form_message %}
    <p class="message i16 bell">{{ form_message }}</p>
  {% endif %}

    {% if not component %}
        {% url component_add project.slug as component_form_url %}
    {% else %}
        {% url component_edit project.slug component.slug as component_form_url %}
    {% endif %}

    <div id="component-tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="ui-state-default ui-corner-top {% if component_form %} ui-tabs-selected {% endif %} ui-state-active">
                <a href="{{ component_form_url }}"><span>{% trans "Checkout" %}</span></a>
            </li>
            {% if component %}
            <li class="ui-state-default ui-corner-top {% if allow_submission_form %} ui-tabs-selected {% endif %} ui-state-active">
                <a href="{% url component_submission_edit project.slug component.slug %}"><span>{% trans "Submission" %}</span></a>
            </li>
            {% endif %}
        </ul>
        <div class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        {% if component_form %}
            <form action='' method='post'>
                <table>
                    <tbody>
                    {% form_as_table_rows component_form %}
                    {% form_as_table_rows unit_form %}
                    {% for subform in unit_subforms %}
                    {% form_as_table_rows subform.form subform.id %}
                    {% endfor %}
                    </tbody>
                </table>
                <p class="submit"><input type="submit" class="i16 submit" value="{% trans "Save component" %}" /></p>
            </form>
        {% endif %}
        {% if allow_submission_form %}
            <form action='' method='post'>
                <table>
                    <tbody>
                    {% form_as_table_rows allow_submission_form %}
                    </tbody>
                </table>
                <p class="submit"><input type="submit" class="i16 submit" value="{% trans "Save component" %}" /></p>
            </form>
            {% hook "allow_submission_form_extra.html" allow_submission_form_extra %}
        {% endif %}
        </div>
    </div>
  </div>
{% endblock %}
