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

{% 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_name }}{% endblocktrans %}
{% endif %}{% endblock %}

{% block extra_head %}
  <link type="text/css" href="{{ MEDIA_URL }}css/ui.tabs.css" rel="stylesheet" />
  <script type="text/javascript" src="{{ MEDIA_URL }}js/ui.core.min.js"></script>
  <script type="text/javascript" src="{{ MEDIA_URL }}js/ui.tabs.min.js"></script>
<script>
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 ()
    {
        // Tabs
        $("#component-tabs").tabs({ 
            fx: { opacity: "toggle", duration: "fast"},
            {% if not component.id %}
            disabled: [1], // disable submission tab while we don't have the component saved
            {% endif %}
        });

        // 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_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 %}

    <div id="component-tabs">
        <ul>
            <li><a href="#tab-1"><span>{% trans "Checkout" %}</span></a></li>
            <li><a href="#tab-2"><span>{% trans "Submission" %}</span></a></li>
        </ul>
        <div id="tab-1">
            <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>
        </div>
        <div id="tab-2">
            <form action='' method='post'>
                <table>
                    <tbody>
                    {% form_as_table_rows allow_subform %}
                    </tbody>
                </table>
                <p class="submit"><input type="submit" class="i16 submit" value="{% trans "Save component" %}" /></p>
            </form>
        </div>
    </div>

  
  </div>
{% endblock %}
