{% extends "fenixedu-learning-theme/base.html" %}

{% macro viewCurricularCourses(curricularCoursesStream) %}
	{% set applicationBundle = 'resources.ApplicationResources' %}
	{% lazyFor curricularCourse in curricularCoursesStream %}
		<div class="row small">
			<!-- NAME -->
			<div class="col-md-5">
				<a href="{{ curricularCourse.url }}" style="font-size: 120%">{{ curricularCourse.name.content }} </a>
				<div>
					{{ curricularCourse.contextInformation }}
				</div>
			</div>

			<!-- INFO -->
			<div class="col-md-2">
				<p>
					<span class="context-info">
						{% if curricularCourse.isSemestrial %}
							{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.semestral') }}
						{% else %}
							{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.anual') }}
						{% endif %}
					</span>
					{% if curricularCourse.isOptional %}
						{{ i18n(applicationBundle, 'label.degreeCurricularPlan.renderer.option') }}
					{% endif %}
				</p>
			</div>

			<div class="col-md-2">
				<p>
					{{ curricularCourse.ECTS }}
					{{ i18n(applicationBundle, 'label.credits.abbreviation') }}
				</p>
			</div>

			<!-- LOAD -->
			<div class="col-md-3">

				<p>
					{{ i18n(applicationBundle, 'label.degreeCurricularPlan.renderer.acronym.contact.load') }}
					-
					{{ curricularCourse.contactLoad }}
					-
					{{ i18n(applicationBundle, 'label.degreeCurricularPlan.renderer.acronym.autonomous.work') }}
					-
					{{ curricularCourse.autonomousWorkHours }}
					-
					{{ i18n(applicationBundle, 'label.degreeCurricularPlan.renderer.acronym.total.load') }}
					-
					{{ curricularCourse.totalLoad }}
				</p>
			</div>
			
			<!-- FREQUENCY -->
			<div class="col-md-1">

			</div>
		</div>

		{% if curricularCourse.rules.count > 0 %}
			<div class="rules">
				<div class="level">
					{% lazyFor rule in curricularCourse.rules %}
						<p><span class="rule">{{ rule }}</span></p>
					{% endLazyFor %}
				</div>
			</div>
		{% endif %}
		<hr />

	{% endLazyFor %}
{% endmacro %}

{% macro viewCourseGroups(courseGroups) %}
	{% set bundle = 'resources.ApplicationResources' %}
	{% lazyFor courseGroup in courseGroups %}

        <h4>{{ courseGroup.buildImage }} {{ courseGroup.name.content }}</h4>
        <hr />
		<div class="level" id="{{courseGroup.externalId}}" style="{{courseGroup.initialStyle}}">
			<!-- RULES -->
			<div class="rules">
				{% if courseGroup.rules.count > 0 %}
					{% lazyFor rule in courseGroup.rules %}
						<p><span class="rule">{{ rule }}</span></p>
					{% endLazyFor %}
					<hr />
				{% endif %}
			</div>
			<!-- CHILDS -->
			{{ viewCurricularCourses(courseGroup.curricularCourses) }}
			{{ viewCourseGroups(courseGroup.courseGroups) }}
		</div>
	{% endLazyFor %}


{% endmacro %}


{% macro viewCurricularCoursesBySemester(coursesByCurricularSemester) %}
	{% for entry in entries(coursesByCurricularSemester) %}
		{% set curricularPeriod = entry.key %}
		{% set courses = entry.value %}

		<h4>{{ curricularPeriod.fullLabel }}</h4>
		<br />
		{{ viewCurricularCourses(courses.stream) }}
        <br />
	{% endfor %}
{% endmacro %}

{% block content %}

    <ul class="nav nav-tabs" role="tablist">
        <li class="active">
        	<a href="#byGroups" role="tab" data-toggle="tab">
        		{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.byGroups') }}
        	</a>
    	</li>

        <li>
        	<a href="#bySemesters" role="tab" data-toggle="tab">
        		{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.byYearAndSemester') }}        		
        	</a>
    	</li>
    </ul>

	<br />

    <div class="tab-content">
		<div class="tab-pane fade in" id="bySemesters">
            <div>

            	<!-- qubExtension, duplicate code in bySemesters/byGroups -->
                <div class="dropdown pull-right">
                    <button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                        {{ selectedYear.year }} 
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        {% for year in years %}
                            <li><a href="?year={{ year.externalId }}">{{ year.year }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                
                <!-- qubExtension, duplicate code in bySemesters/byGroups -->
                {% if plans.size > 1 %}
	                <div class="dropdown pull-right">
	                    <button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
	                        {{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.since') + " " + selectedPlan.initialDateYearMonthDay.year }} 
	                        <span class="caret"></span>
	                    </button>
	                    <ul class="dropdown-menu" role="menu">
	                        {% for plan in plans %}
	                            <li><a href="?plan={{ plan.externalId }}">{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.since') + " " + plan.initialDateYearMonthDay.year }}</a></li>
	                        {% endfor %}
	                    </ul>
	                </div>
                {% endif %}
                
            </div>
			{{viewCurricularCoursesBySemester(coursesByCurricularSemester)}}
		</div>
        <div class="tab-pane fade in active" id="byGroups">
            <div>
                <button class="btn btn-sm btn-default pull-right" type="button" id="rules_button">
                    {{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.showRules') }}
                </button>
                
                <!-- qubExtension, duplicate code in bySemesters/byGroups -->
                <div class="dropdown pull-right">
                    <button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                        {{ selectedYear.year }} 
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        {% for year in years %}
                            <li><a href="?year={{ year.externalId }}">{{ year.year }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                
                <!-- qubExtension, duplicate code in bySemesters/byGroups -->
                {% if plans.size > 1 %}
	                <div class="dropdown pull-right">
	                    <button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
	                        {{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.since') + " " + selectedPlan.initialDateYearMonthDay.year }} 
	                        <span class="caret"></span>
	                    </button>
	                    <ul class="dropdown-menu" role="menu">
	                        {% for plan in plans %}
	                            <li><a href="?plan={{ plan.externalId }}">{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.since') + " " + plan.initialDateYearMonthDay.year }}</a></li>
	                        {% endfor %}
	                    </ul>
	                </div>
                {% endif %}

            </div>
			{{ viewCourseGroups(courseGroups) }}
		</div>
	</div>

	 <div>
		<p><em>{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.legend') }}:</em></p>
		<ul style="list-style-type:none">
		  	<li>{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.semestral.acronym') }} - {{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.semestral') }}</li>
		  	<li>{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.anual.acronym') }} - {{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.anual') }}</li>	
			<li>{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.contact.load.acronym') }} - {{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.contact.load') }}</li>
			<li>{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.autonomous.work.acronym') }} - {{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.autonomous.work') }}</li>
			<li>{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.total.work.acronym') }} - {{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.total.work') }}</li>
		</ul>  
	</div>

	<script type="text/javascript">
		$('.rules').hide();
		var names = ['{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.showRules') }}', '{{ i18n('resources.FenixEduLearningResources', 'label.degreeCurricularPlan.hideRules') }}'];
		var selectedNamePosition = 0;
		$('#rules_button').click(function(){
			selectedNamePosition = (selectedNamePosition + 1) % names.length;
			$('.rules').fadeToggle();
			$('#rules_button').html(names[selectedNamePosition]);
		});	

        function toggleImage(e) {
            var expand = 'toggle_plus10.gif'
            var collapse = 'toggle_minus10.gif'
            
            var current = e.attr('src');
            var changed = current;
            if (current.indexOf(collapse) > 0) {
                changed = current.replace(collapse, expand);
            } else {
                changed = current.replace(expand, collapse);
            }
            
            e.attr('src', changed);
        }
        
        function toggleCheck(e) {
            var current = e.css('display');
            var changed = current;
            if (current == "none") {
                changed = "";
            } else {
                changed = "none";
            }
            
            e.css('display', changed);
        }
        
	</script>
    

	<style type="text/css">
		.level {
			margin-left: 10px;
		}
		.rule {
			color: #888;
			margin-top: 0px;
			font-size: 90%;
		}
		hr {
			margin-top: 5px;
			margin-bottom: 5px;
		}
	   .tab-pane h4 {
			background-color: #fbfbdd;
			padding-top: 10px;
			padding-bottom: 10px;
			font-size: 14px;
			font-weight: bold;
		}
		.tab-pane .level {
			margin-left: 30px;
		}
	</style>	

{% endblock content %}