{% extends 'base_software.html' %}
{% from 'host/common.html' import edit_field %}
{% from 'host/common.html' import alert_cco_lookup_disabled %}

{% block head %}

<script src="/static/jquery/js/smu_info_dialog.js"></script>
<script src="/static/jquery/js/browse_server_dialog.js"></script>
<script>
    $(function() {

        var spinner = $('#spinner');
        var browse_spinner = $('#browse-spinner');
        browse_spinner.hide();

        var ddts_spinner = $('#ddts-spinner');
        ddts_spinner.hide();

        var platform = "{{ platform }}";
        var release = "{{ release }}";

        var cco_lookup_enabled = "{{ system_option.enable_cco_lookup }}" == 'True';
        var filter_option = $.cookie('platforms-and-releases-filter-option') == null ? 'Optimal' : $.cookie('platforms-and-releases-filter-option');
        $("#filter-selector option[value='" + filter_option + "']").attr('selected', 'selected');

        // Sets the correct filter icon color
        toggle_filter_icon_color(filter_option);

        $('#filter-selector').on('change', function(e) {
            filter_option = $(this).val();
            $.cookie('platforms-and-releases-filter-option', filter_option);
            spinner.show();
            refresh_smu_list_table();
            refresh_sp_list_table();
            refresh_tar_list_table();

            toggle_filter_icon_color(filter_option);
        });

        $('#smu-list-tab').tab();
        $('#smu-list-tab a:first').tab('show');

        // The SP table has problem with the table layout
        $('#smu-list-tab a[href="#sp-tab"]').click(function() {
            refresh_sp_list_table();
        });

        // The Release Software table has problem with the table layout
        $('#smu-list-tab a[href="#tar-tab"]').click(function() {
            refresh_tar_list_table();
        });
       
        var smu_table = $("#smu-datatable").dataTable({
            "order": [
                [2, "desc"]
            ],
            "bLengthChange": false,
            "pageLength": 500,
            "scrollX": true,
            "scrollY": 450,
            "fnCreatedRow": function(nRow, aData, iDataIndex) {
                var date_diff = date_diff_in_days(new Date($('td:eq(2)', nRow).text()), new Date());
                if (date_diff <= 7) {
                    $('td', nRow).css('background-color', '#FFFFCC');
                }
            },
            "columnDefs": [{
                "sortable": false,
                "targets": 0,
                "data": 'package_name',
                "render": function(data, type, row) {
                    return '<center><input type="checkbox" value="' + data + '" class="check"></center>';
                }
            }, {
                "targets": 1,
                "sortable": false,
                "data": 'ST',
                "render": function(data, type, row) {
                    if (data == 'True') {
                        return '<center><img src="/static/circle_check.png" title="Found in CSM Server Repository"></center>';
                    } else {
                        return '<center><img src="/static/exclamation.png" title="Missing in CSM Server Repository"></center>';
                    }
                }
            }, {
                "targets": 2,
                "data": 'posted_date'
            }, {
                "targets": 3,
                "data": 'id',
                "render": function(data, type, row) {
                    return '<a class="show-smu-details" smu_id="' + data + '" href="javascript://">' + data + '</a>';
                }
            }, {
                "targets": 4,
                "data": 'ddts',
                "render": function(data, type, row) {
                    return '<a class="show-ddts-details" ddts_id="' + data + '" href="javascript://">' + data + '</a>';
                }
            }, {
                "targets": 5,
                "data": 'type'
            }, {
                "targets": 6,
                "data": 'description'
            }, {
                "targets": 7,
                "data": 'impact'
            }, {
                "targets": 8,
                "data": 'functional_areas'
            }, {
                "targets": 9,
                "data": 'status'
            }, {
                "targets": 10,
                "data": 'package_bundles'
            }, ],
        }).on('draw.dt', function(e, settings, json) {
            var rows = smu_table.api().ajax.json().data.length;
            $('#badge-smu-list').html(rows);

            // Update the CCO retrieval time
            get_retrieval_elapsed_time();

            spinner.hide();
        });

        var sp_table = $("#sp-datatable").dataTable({
            "order": [
                [2, "desc"]
            ],
            "bLengthChange": false,
            "pageLength": 100,
            "scrollX": true,
            "scrollY": 450,
            "fnCreatedRow": function(nRow, aData, iDataIndex) {
                var date_diff = date_diff_in_days(new Date($('td:eq(2)', nRow).text()), new Date());
                if (date_diff <= 7) {
                    $('td', nRow).css('background-color', '#FFFFCC');
                }
            },
            "columnDefs": [{
                "sortable": false,
                "targets": 0,
                "data": 'package_name',
                "render": function(data, type, row) {
                    return '<center><input type="checkbox" value="' + data + '" class="check"></center>';
                }
            }, {
                "sortable": false,
                "targets": 1,
                "data": 'ST',
                "render": function(data, type, row) {
                    if (data == 'True') {
                        return '<center><img src="/static/circle_check.png" title="Found in server repository"></center>';
                    } else {
                        return '<center><img src="/static/exclamation.png" title="Not found in server repository"></center>';
                    }
                }
            }, {
                "targets": 2,
                "data": 'posted_date'
            }, {
                "targets": 3,
                "data": 'id',
                "render": function(data, type, row) {
                    return '<a class="show-smu-details" smu_id="' + data + '" href="javascript://">' + data + '</a>';
                }
            }, {
                "targets": 4,
                "data": 'ddts',
                "render": function(data, type, row) {
                    return '<a class="show-ddts-details" ddts_id="' + data + '" href="javascript://">' + data + '</a>';
                }
            }, {
                "targets": 5,
                "data": 'type'
            }, {
                "targets": 6,
                "data": 'description'
            }, {
                "targets": 7,
                "data": 'impact'
            }, {
                "targets": 8,
                "data": 'functional_areas'
            }, {
                "targets": 9,
                "data": 'status'
            }, {
                "targets": 10,
                "data": 'package_bundles',
            }, ],
        }).on('draw.dt', function(e, settings, json) {
            var rows = sp_table.api().ajax.json().data.length;
            $('#badge-sp-list').html(rows);
        });

        var tar_table = $("#tar-datatable").dataTable({
            "order": [
                [2, "asc" ]
            ],
            "bLengthChange": false,
            "pageLength": 100,
            "scrollY": 450,
            "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                var date_diff = date_diff_in_days(new Date($('td:eq(2)', nRow).text()), new Date() );
                if (date_diff <= 7) {
                    $('td', nRow).css('background-color', '#FFFFCC');
                }
            },
            "columnDefs": [{
                "sortable": false,
                "targets": 0,
                "data": 'name',
                "render": function ( data, type, row ) {
                    return '<center><input type="checkbox" value="' + data + '" class="check"></center>';
                }
            }, {
                "sortable": false,
                "targets": 1,
                "data":'ST',
                "render": function(data, type, row) {
                    if (data == 'True') {
                        return '<center><img src="/static/circle_check.png" title="Found in CSM Server Repository"></center>';
                    } else {
                        return '<center><img src="/static/exclamation.png" title="Missing in CSM Server Repository"></center>';
                    }
                }
            }, {
                "targets": 2,
                "data":'name'
            }, {
                "targets": 3,
                "data": 'compressed_size'
            }, ],
        }).on('draw.dt', function ( e, settings, json ) {
            var rows = tar_table.api().ajax.json().data.length;
            $('#badge-tar-list').html(rows);
        });
      
        $('#smu-check-all').click(function() {
            toggle_check_all(smu_table, this);
        });

        $('#sp-check-all').click(function() {
            toggle_check_all(sp_table, this);
        });

        $('#tar-check-all').click(function () {
          toggle_check_all(tar_table, this);
        });

        function toggle_check_all(data_table, this_instance) {
            var filtered_rows = data_table.$('tr', {
                "filter": "applied"
            });
            for (var i = 0; i < filtered_rows.length; i++) {
                $(filtered_rows[i]).find('.check').prop('checked', this_instance.checked);
            }
        }

        function get_retrieval_elapsed_time() {
            if (!cco_lookup_enabled) {
                $.ajax({
                    url: "{{ url_for('cco.api_get_cco_retrieval_elapsed_time', platform=platform, release=release) }}",
                    dataType: 'json',
                    success: function(response) {
                        $.each(response, function(index, element) {
                            $('#retrieval-elapsed-time').html(element[0].retrieval_elapsed_time + '.');
                        });
                    }
                });
            }
        }

        function refresh_smu_list_table() {
            smu_table.api().ajax.url("{{ url_for('cco.api_get_smu_list', platform=platform, release=release) }}" +
                "?filter=" + filter_option).load();
        }

        function refresh_sp_list_table() {
            sp_table.api().ajax.url("{{ url_for('cco.api_get_sp_list', platform=platform, release=release) }}" +
                "?filter=" + filter_option).load();
        }

        function refresh_tar_list_table() {
            tar_table.api().ajax.url("{{ url_for('cco.api_get_tar_list', platform=platform, release=release) }}").load();
        }

        function fetch_software_info() {
            $.ajax({
                url: "{{ url_for('cco.api_fetch_cco_software', platform=platform, release=release) }}",
                dataType: 'json',
                success: function(response) {
                    $.each(response, function(index, element) {
                        refresh_smu_list_table();
                        refresh_sp_list_table();
                        refresh_tar_list_table();
                    });
                }
            });
        }

        fetch_software_info();

        function open_ddts_url(url) {
            if (cco_lookup_enabled) {
                window.open(url, '_blank');
            } else {
                bootbox.alert("Unable to view DDTS information.  The administrator has disabled outgoing CCO connection.");
            }
        }

        function toggle_filter_icon_color(filter_option) {
            if (filter_option == 'Optimal') {
                $('#filter-icon').addClass("DarkGreen");
                $('#filter-icon').removeClass("Red");
            } else {
                $('#filter-icon').removeClass("DarkGreen");
                $('#filter-icon').addClass("Red");
            }
        }

        var software_packages = '';

        $('#download-software').on('click', function() {
            if (!cco_lookup_enabled) {
                bootbox.alert("Unable to download software.  The administrator has disabled outgoing CCO connection.");
                return;
            }
            // Re-initialize the package list
            software_packages = "";

            $('.check').each(function(index) {
                if (this.checked) {
                    // $(this).val() may contain ',' delimited package list especially in RPM situation.
                    software_packages += $(this).val().replace(/,/g , "\n") + '\n';
                }
            });

            if (software_packages.length > 0) {
                $('#select-server-dialog').modal({
                    show: true,
                    backdrop: 'static'
                })

                $('#dialog_server').val($.cookie('server_id') == null ? -1 : parseInt($.cookie('server_id')));
                var preferred_server_directory = $.cookie('server_directory') == null ? "" : $.cookie('server_directory');

                retrieve_directory_and_file_list(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), preferred_server_directory, null)
            } else {
                bootbox.alert("No files was selected.");
            }
        });

        $('#dialog_server').on('change', function(e) {
            retrieve_directory_and_file_list(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), '', null);
        });

        $('#dialog_server_directory').on('change', function(e) {
            retrieve_directory_and_file_list(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), $('#dialog_server_directory').val(), null)
        });

        $('#dialog-move-up').on('click', function(e) {
            retrieve_directory_and_file_list(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), get_parent_folder($('#dialog_server_directory').val()), null);
        });

        $('#dialog-reset-server-directory').on('click', function(e) {
            reset_server_directory(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), $('#dialog_server_directory').val(), null);
        });

        $('#on-select-server-submit').click(function(e) {
            if ($('#dialog_server').val() == -1) {
                bootbox.alert("Server Repository has not been specified.");
                return false;
            }

            check_server_reachability_before_proceeding($('#dialog_server').val(), $('#dialog_server_directory').val());
        });

        function check_server_reachability_before_proceeding(server_id, server_directory) {
            spinner.show();
            $.ajax({
                url: "/install/api/get_server_file_dict/" + server_id,
                dataType: 'json',
                data: {
                    server_directory: server_directory
                },
                success: function(response) {
                    if (response.status == 'Failed') {
                        bootbox.alert("The server repository is not browsable by CSM Server.");
                    } else {
                        // Remember the selections
                        $.cookie('server_id', server_id);
                        $.cookie('server_directory', server_directory);

                        var validate_object = {
                            form: null,
                            hostname: null,
                            server_id: server_id,
                            server_directory: server_directory,
                            software_packages: software_packages,
                            spinner: spinner,
                            install_actions: null,
                            check_missing_file_on_server: server_id > -1,
                            callback: on_finish_validate,
                            pending_downloads: null,
                            cco_lookup_enabled: cco_lookup_enabled
                        };

                        on_validate_prerequisites_and_files_on_server(validate_object);
                    }
                }
            });
        }

        function on_finish_validate(validate_object) {
            if (validate_object.pending_downloads == null) {
                return;
            }

            $.post("/cco/api/create_download_jobs",
            {
                server_id: validate_object.server_id,
                server_directory: validate_object.server_directory,
                smu_list: validate_object.software_packages,
                pending_downloads: validate_object.pending_downloads
            },
            function(response, status, xhr) {
                validate_object.spinner.hide();
                if (status == "success") {
                    if (response.status == 'Failed') {
                        bootbox.alert("Unable to create download jobs.");
                    } else {
                        var download_dashboard_url = "{{ url_for('download_dashboard.home') }}";
                        bootbox.alert("Requested download has been submitted. Click <a href='" + download_dashboard_url + "'>Download Dashboard</a> to view the download status.<br><br>");
                    }
                } else {
                    bootbox.alert("on_finish_validate() Error=" + xhr.statusText);
                }
            });
        }

        // Use delegate pattern for event
        // This happens when the user clicks a pre-requisite/supersedes/superseded by SMU
        // on the SMU info dialog.
        $("#display-smu-details-dialog").on("click", ".show-smu-hyperlink-details", function() {
            display_smu_details($('#smu-details-table'), $('#smu-name-title'), $(this).attr('smu_id'));
            add_to_history($(this).attr('smu_id'));
        });

        // Use delegate pattern for event
        $("#smu-datatable").on("click", ".show-smu-details", function() {
            display_smu_details_dialog($(this).attr('smu_id'));
        });

        $("#sp-datatable").on("click", ".show-smu-details", function() {
            display_smu_details_dialog($(this).attr('smu_id'));
        });

        $("#smu-datatable").on("click", ".show-ddts-details", function() {
            display_ddts_details_dialog($(this).attr('ddts_id'));
        });

        $("#sp-datatable").on("click", ".show-ddts-details", function() {
            display_ddts_details_dialog($(this).attr('ddts_id'));
        });

        function display_smu_details_dialog(smu_id) {
            init_history(smu_id);
            $('#display-smu-details-dialog').modal({
                show: true
            })
            display_smu_details($('#smu-details-table'), $('#smu-name-title'), smu_id)
        }

        function display_ddts_details_dialog(ddts_id) {
            if (cco_lookup_enabled){
                $('#display-ddts-details-dialog').modal({
                    show: true
                })
                ddts_spinner.show();
                display_ddts_details($('#ddts-details-table'), $('#ddts-name-title'), ddts_id, ddts_spinner)
            } else {
                bootbox.alert("Unable to view DDTS information.  The administrator has disabled outgoing CCO connection.");
            }
        }

        $("#move-back").on("click", function() {
            move_back($('#smu-details-table'), $('#smu-name-title'));
        });

        $("#move-forward").on("click", function() {
            move_forward($('#smu-details-table'), $('#smu-name-title'));
        });

        $('#export-software-information').click(function() {
            $('#export-software-information-dialog').modal({
                show: true
            })
        });

        $('#on-export-software-submit').click(function(e) {
            var export_format = $('#export_format').val();
            var export_layout = $('#export_layout').val();

            $('#export-software-information-form').attr('action',
                "{{ url_for('cco.export_software_information', platform=platform, release=release) }}" +
                "?filter=" + filter_option + "&export_format=" + export_format +  "&export_layout=" + export_layout);
            $('#export-software-information-form').submit();


        });


        setInterval(function() {
            get_retrieval_elapsed_time();
        }, 10000);
    });
</script>

<style>
    .modal-dialog {
        width: 1000px;
    }
    th,
    td {
        white-space: nowrap;
    }
    .modal td.value {
        white-space: normal;
    }
</style>
{% endblock %}

{% block main %}
<div id="export-software-information-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" id="export-software-information-form" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4>
                        <center>Export Software Information</center>
                    </h4>
                </div>
                <div class="modal-body">
                    {{ edit_field(export_software_information_form.export_format, field_width="col-sm-6", class="form-control") }}
                    {{ edit_field(export_software_information_form.export_layout, field_width="col-sm-6", class="form-control") }}
                </div>
                <div class="modal-footer">
                    <div class="form-actions">
                        <div class="btn col-sm-offset-4">
                            <button id="on-export-software-submit" type="submit" class="btn btn-primary" data-dismiss="modal">OK</button>
                            <button class="btn" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="display-smu-details-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <a href="javascript://">
                    <img id='move-back' src="/static/blue_left_arrow.png" title="Go Back">
                    <img id='move-forward' src="/static/blue_right_arrow.png" title="Go Forward">
                    </a>
                    <h4>
                        <center><span id="smu-name-title"></span></center>
                    </h4>
                </div>
                <div class="modal-body">
                    <div style="height:350px; overflow-y: scroll;">
                        <table class="table table-striped" id="smu-details-table">
                            <thead>
                                <tr>
                                    <th>Field Name</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </form>
    </div>
</div>
<div id="display-ddts-details-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <span id="ddts-spinner">
                        <img src="{{ url_for('static', filename='spinner.gif') }}">
                    </span>
                    <h4>
                        <center><span id="ddts-name-title"></span></center>
                    </h4>
                </div>
                <div class="modal-body">
                    <div style="height:350px; overflow-y:scroll; word-wrap:break-word;">
                        <table class="table table-striped" id="ddts-details-table">
                            <thead>
                                <tr>
                                    <th>Field Name</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </form>
    </div>
</div>
<div id="select-server-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4>Select Server Repository</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="col-sm-4 control-label"></label>
                        <div class="col-sm-8"><label class="col-sm-4 control-label"></label></div>
                    </div>
                    {{ edit_field(form.dialog_server, field_width="col-sm-8", class="form-control") }}
                    <div class="form-group ">
                        <label class="col-sm-4 control-label" id="label_dialog_server_directory" for="dialog_server_directory">Server Directory</label>
                        <div class=col-sm-6>
                            <select class="form-control" id="dialog_server_directory" name="dialog_server_directory">
                                <option value=""></option>
                            </select>
                        </div>
                        <a href="javascript://">
                        <img id='dialog-move-up' src="/static/up_arrow.png" title="Go to Parent Folder">
                        <img id='dialog-reset-server-directory' src="/static/remove.png" title="Reset Server Directory">
                        </a>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-actions">
                        <div class="btn col-sm-offset-4">
                            <button id="on-select-server-submit" type="submit" class="btn btn-primary" data-dismiss="modal">OK</button>
                            <button class="btn" data-dismiss="modal">Cancel</button>
                            <img id="browse-spinner" src="{{ url_for('static', filename='spinner.gif') }}">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Main -->
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            {% if not system_option.enable_cco_lookup %}
                {{ alert_cco_lookup_disabled() }}
            {% endif %}
            <div class="col-sm-offset-8 col-sm-2">
                <div class="input-group">
                    <span id="filter-icon" title="SMU/Service Pack Filter" class="input-group-addon glyphicon glyphicon-filter"></span>
                    <select class="form-control" id="filter-selector" name="filter-selector">
                        <option value="Optimal">Optimal</option>
                        <option value="All">All</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-1">
                <div class="btn-group">
                    <button type="button"  class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Action
                    <span class="glyphicon glyphicon-link"></span>
                    <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li id="download-software"><a href="javascript://">Download to Server Repository</a></li>
                        <li class="divider"></li>
                        <li id="export-software-information"><a href="javascript://">Export Software Information</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-1">
                <span id="spinner">
                    <center><img src="{{ url_for('static', filename='spinner.gif') }}"></center>
                </span>
            </div>
        </div>
    </div>
    <!-- upper section -->
    <div class="row">
        <div class="col-sm-12">
            <ul class="nav nav-tabs" id="smu-list-tab">
                <li>
                    <a data-toggle="tab" href="#smu-tab">
                    {{ platform | beautify_platform }}-{{ release }} > SMUs &nbsp;
                    <span id="badge-smu-list" class="badge alert-success">0</span>
                    </a>
                </li>
                <li>
                    <a data-toggle="tab"  href="#sp-tab">
                    Service Packs &nbsp;
                    <span id="badge-sp-list" class="badge alert-success">0</span>
                    </a>
                </li>
                <li>
                    <a data-toggle="tab"  href="#tar-tab">
                    Release Software &nbsp;
                    <span id="badge-tar-list" class="badge alert-success">0</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content" style="margin-top:20px;">
                <div id="smu-tab" class="tab-pane fade in active">
                    <table cellspacing="0" class="display table" id="smu-datatable">
                        <thead>
                            <tr>
                                <th>
                                    <center><input type='checkbox' id='smu-check-all'></center>
                                </th>
                                <th>Status</th>
                                <th>Posted Date</th>
                                <th>SMU ID</th>
                                <th>DDTS</th>
                                <th>Type</th>
                                <th>Description</th>
                                <th>Impact</th>
                                <th>Functional Areas</th>
                                <th>Status</th>
                                <th>Package Bundles</th>
                        </thead>
                    </table>
                </div>
                <div id="sp-tab" class="tab-pane fade">
                    <table cellspacing="0" class="display table" id="sp-datatable">
                        <thead>
                            <tr>
                                <th>
                                    <center><input type='checkbox' id='sp-check-all'></center>
                                </th>
                                <th>Status</th>
                                <th>Posted Date</th>
                                <th>SMU ID</th>
                                <th>DDTS</th>
                                <th>Type</th>
                                <th>Description</th>
                                <th>Impact</th>
                                <th>Functional Areas</th>
                                <th>Status</th>
                                <th>Package Bundles</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div id="tar-tab" class="tab-pane">
                    <table cellspacing="0" class="display table" id="tar-datatable">
                        <thead>
                            <tr>
                                <th>
                                    <center><input type='checkbox' id='tar-check-all'></center>
                                </th>
                                <th>Status</th>
                                <th>Name</th>
                                <th>Compressed Size (Bytes)</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- /upper section -->
</div>
<!-- Main -->
{% endblock %}