{% extends "layout.html" %}
{% from 'macros.html' import alert_dismiss with context %}
{% from 'monitor_tiles.html' import monitor_tiles_styles%}

{% block content %}
    {% if alerta %}
        {{ alert_dismiss(alerta) }}
    {% endif %}
    <div class="jumbotron py-1">
        <div class="container-fluid py-0">
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <span class="float-xs-left"><h2>{{ titulo|safe }}<br></h2></span>
                <br class="">
                <span class="float-sm-right hidden-sm-down">
                    <a class="btn btn-primary btn-sm"
                       href="{{ url_for('download_file', file_id=file_id, as_attachment=True) }}"
                       download="{{ url_for('download_file', file_id=file_id, as_attachment=True) }}" role="button">
                        <i class="fa fa-download" aria-hidden="true"></i> Download</a>
                    <button type="button" id="button-save_changes-header-1" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#confimationModalSaveFile"><i class="fa fa-pencil-square" aria-hidden="true"></i> Save changes</button>
                </span>
            </div>
            <div class="hidden-md-up mb-1 pb-1">
                <a class="btn btn-primary btn-sm"
                   href="{{ url_for('download_file', file_id=file_id, as_attachment=True) }}"
                   download="{{ url_for('download_file', file_id=file_id, as_attachment=True) }}" role="button">
                    <i class="fa fa-download" aria-hidden="true"></i> Download</a>
                <button type="button" id="button-save_changes-header-2" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#confimationModalSaveFile"><i class="fa fa-pencil-square" aria-hidden="true"></i> Save changes</button>
            </div>
            {% if filename %}
                <h6 class="lead">Contents of <code>{{ filename }}</code>:</h6>
            {% endif %}
            {% if abspath %}<small style="word-wrap:break-word; overflow-wrap: break-word;">Path: {{ abspath|safe }}</small>{% endif %}
            {% if extra_links %}
                <div>
                {% for (text, href) in extra_links %}
                    <a class="btn btn-warning btn-sm" href="{{ href|safe }}" role="button">{{ text|safe }}</a>
                {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <ul class="nav nav-tabs" id="EditorTabView" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#edit_view" role="tab" aria-controls="edit_view">
                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <strong>Edit</strong>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#show_view" role="tab" aria-controls="show_view">
                            <i class="fa fa-eye" aria-hidden="true"></i> <strong>View</strong>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#upload_view" role="tab" aria-controls="upload_view">
                            <i class="fa fa-upload" aria-hidden="true"></i> <strong>Upload</strong>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <br>
    <div class="tab-content">
        {% if dict_config_content %}
        <div class="tab-pane fade in active" id="edit_view" role="tabpanel">
            <div class="container-fluid px-0">
                {% if show_switch_comments %}
                <div class="py-0 col-xs-12 mx-auto">
                    <div class="checkbox">
                        <label>Show file comments   <input type="checkbox" id="switch_comments" value="with_comments"
                                      onchange="location.href='{{ url_for('editfile', file=file_id, without_comments=with_comments) }}';"
                                      class="form-control form-control-sm" {% if with_comments %}checked{% endif %}>
                        </label>
                    </div>
                </div>
                {% endif %}
                <form id="form_ini_file_config" class="form-horizontal col-xs-12 px-0" method="post" autocomplete="on">
                {% for section, config_opts in dict_config_content.items() %}
                    {% if dict_config_content|length > 1 %}
                    <div class="col-md-12 col-lg-6">
                    {% else %}
                    <div class="col-lg-12">
                    {% endif %}
                        <div class="form-group roundbox roundbox-edition">
                            <h2><span class="tag tag-pill tag-primary">{{ section }}</span><button type="button" class="btn btn-danger btn-sm float-sm-right hidden-xs-down" data-toggle="modal" data-target="#confimationModalSaveFile"><i class="fa fa-pencil-square" aria-hidden="true"></i> Save</button></h2>
                            {% for var_name, (value, var_type, comment) in config_opts.items() %}
                                {% if comment and with_comments %}
                                    <div class="col-sm-offset-2"><pre class="mb-0 text-muted font-italic"># {{ comment }}</pre></div>
                                {% endif %}
                                <div class="form-group input-group input-group-sm" id="group_{{ var_name }}">
                                    {% if var_type == 'str' %}
                                        <label class="col-sm-5 form-control-label" for="var_{{ var_name }}"><strong>{{ var_name }}:</strong></label>
                                        <div class=" col-sm-7">
                                            <input type="text" class="form-control form-control-sm"
                                                   name="{{ var_name }}" id="var_{{ var_name }}" value="{{ value }}">
                                        </div>
                                    {% elif var_type == 'text' %}
                                        <label class="col-sm-3 form-control-label" for="var_{{ var_name }}"><strong>{{ var_name }}:</strong></label>
                                        <div class=" col-sm-12">
                                            <input type="text" rows="3" class="form-control form-control-sm" style="word-wrap:break-word; overflow-wrap: break-word;"
                                                   name="{{ var_name }}" id="var_{{ var_name }}" value="{{ value }}">
                                        </div>
                                    {% elif var_type == 'bool' %}
                                        <div class="col-sm-12">
                                            <div class="checkbox">
                                                <label><input type="checkbox" id="switch_{{ var_name }}"
                                                              name="{{ var_name }}"
                                                              {% if value %}checked{% endif %}>   <strong>{{ var_name }}</strong>
                                                </label>
                                            </div>
                                        </div>
                                    {% elif var_type == 'float' %}
                                        <label class="col-sm-8 form-control-label" for="var_{{ var_name }}"><strong>{{ var_name }}:</strong></label>
                                        <div class=" col-sm-4">
                                            <input type="number" class="form-control form-control-sm"
                                                   name="{{ var_name }}" id="var_{{ var_name }}" value="{{ value }}">
                                        </div>
                                    {% else %}
                                        <label class="col-sm-8 form-control-label" for="var_{{ var_name }}"><strong>{{ var_name }}:</strong></label>
                                        <div class=" col-sm-4">
                                            <input type="number" class="form-control form-control-sm" step="1" id="var_{{ var_name }}"
                                                   name="{{ var_name }}" value="{{ value }}">
                                        </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                            <div class="form-group input-group input-group-sm mb-0">
                                    <button type="button" class="btn btn-danger btn-sm btn-block hidden-sm-up" data-toggle="modal" data-target="#confimationModalSaveFile"><i class="fa fa-pencil-square" aria-hidden="true"></i> Save</button>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                <!-- Modal -->
                <div id="confimationModalSaveFile" class="modal fade" role="dialog">
                  <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Confirm changes?</h4>
                      </div>
                      <div class="modal-body">
                        <p>Click "Confirm over-write" to save changes in configuration file, over-writting the INI config file {% if abspath %}(Abspath: <strong style="word-wrap:break-word; overflow-wrap: break-word;">{{ abspath|safe }}</strong>){% endif %}
                        </p>
                      </div>
                      <div class="modal-footer">
                        <button type="submit" class="btn btn-danger btn-sm float-xs-left"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Confirm over-write</button>
                        <button type="button" class="btn btn-primary btn-sm float-xs-right" data-dismiss="modal">Cancel</button>
                      </div>
                    </div>
                  </div>
                </div>
                </form>
            </div>
        </div>
        {% else %}
        <div class="tab-pane fade in active" id="edit_view" role="tabpanel">
            <div class="alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
            CONFIG File not found!!
            </div>
        </div>
        {% endif %}
        <div class="tab-pane fade" id="show_view" role="tabpanel">
            <div class="container">
                <div class="col-xs-12 alert-warning roundbox roundbox-viewing">
                    <br>
                    {% if file_lines %}
                    <pre>{% for line in file_lines %}{{ line|safe }}
                    {% endfor %}</pre>
                    {% else %}
                    <div class="alert alert-danger" role="alert">
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                        <span class="sr-only">Error:</span>
                        File not found!!
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="upload_view" role="tabpanel">
            <div class="container">
                <div class="col-xs-12 alert-danger roundbox roundbox-upload">
                    <h2>Upload file for replacement:</h2>
                    <br>
                    <form class="form-horizontal col-xs-12 mx-auto" id="form_uploadfile"
                          method="POST" action="{{ url_for('uploadfile', file=file_id) }}" enctype="multipart/form-data">
                        <input type="file" name="file" id="file_input" class="inputfile" accept="application/textedit" draggable="true" required>
                        <label for="file_input" class="btn btn-sm my-1 mr-2"><i class="fa fa-upload" aria-hidden="true"></i> <span>Choose a file...</span></label>
                        <button type="button" id="submit_upload_button" class="btn btn-danger btn-sm hidden-xs-up" data-toggle="modal" data-target="#confimationModalUploadFile">
                            <i class="fa fa-pencil-square" aria-hidden="true"></i> Confirm upload and over-write
                        </button>
                        <h6 id="selected_file_props" class="lead hidden-xs-up mt-1"></h6>
                    </form>
                </div>
                <!-- Modal -->
                <div id="confimationModalUploadFile" class="modal fade" role="dialog">
                  <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Confirm Upload?</h4>
                      </div>
                      <div class="modal-body">
                        <p>Click "Confirm replacement" to upload the selected file in order to replace the configuration file {% if abspath %}(Abspath: <strong style="word-wrap:break-word; overflow-wrap: break-word;">{{ abspath|safe }}</strong>){% endif %}
                        </p>
                      </div>
                      <div class="modal-footer">
                        <button type="submit" form="form_uploadfile" class="btn btn-danger btn-sm float-xs-left"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Confirm replacement</button>
                        <button type="button" class="btn btn-primary btn-sm float-xs-right" data-dismiss="modal">Cancel</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block styles %}
{{ monitor_tiles_styles() }}
<link href="{{ url_for('static', filename='css/bootstrap-switch.min.css') }}" rel="stylesheet">
<style type="text/css">
.roundbox {
    border-width: 3px;
    border-radius: 18px;
    padding: 20px;
    border-style: solid;
}
.roundbox-edition{
    background-color: rgba(20, 140, 229, 0.18);
    border-color: #1477d5;
}
.roundbox-viewing{
    background-color: #fcf8e4;
    border-color: #eeac57;
}
.roundbox-upload{
    background-color: rgba(234, 91, 89, 0.27);
    border-color: #d75452;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-withcomments {
    color: #fff;
    background: #0CBB43;
    height: 80%;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-withoutcomments{
    color: #fff;
    background: #8C27D3;
    height: 80%;
}
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.inputfile + label {
    color: #ffffff;
    background-color: #1477d5;
    cursor: pointer; /* "hand" cursor */
    display: inline-block;
}
.inputfile:focus + label,
.inputfile.has-focus + label,
.inputfile + label:hover {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
    background-color: #123972;
}
</style>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/bootstrap-switch.min.js') }}"></script>
<script>
    $(document).ready(function() {
        var switch_comments = {
            size: "mini",
            onColor: "withcomments",
            offColor: "withoutcomments",
            offText: "OFF",
            onText: "ON",
            animate: true
        };
        var switch_bools = {
            size: "mini",
            offText: "OFF",
            onText: "ON",
            animate: true
        };
        $("#switch_comments").bootstrapSwitch(switch_comments);
        {% for section, config_opts in dict_config_content.items() %}
            {% for var_name, (value, var_type, comment) in config_opts.items() %}
                  {% if var_type == 'bool' %}
                    $("#switch_{{ var_name }}").bootstrapSwitch(switch_bools);
                  {% endif %}
            {% endfor %}
        {% endfor %}
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var $saveButton1 = $("#button-save_changes-header-1");
            var $saveButton2 = $("#button-save_changes-header-2");
            if (e.target.href.endsWith('#edit_view')){
                $saveButton1.removeClass('hidden-xs-up');
                $saveButton2.removeClass('hidden-xs-up');
            } else {
                $saveButton1.addClass('hidden-xs-up');
                $saveButton2.addClass('hidden-xs-up');
            }
        });
        $("#form_uploadfile").submit(function(e) {
            var getInputVal = $('#file_input').val();
            if (getInputVal.length == 0 || getInputVal.length == null) {
                alert('ERROR: NO FILE TO UPLOAD');
                event.preventDefault();
            }
        });
        var $input = $("#file_input");
        var $label = $input.next('label');
        var labelVal = $label.html();
        $input.on('change', function( e ) {
            if (e.target.files.length > 0) {
                var fileName = e.target.value.split('\\').pop();
                $label.find('span').html(fileName);
                var file = e.target.files[0];
                var mtime = new Date(file.lastModified);
                var info_file = 'File size: <strong>' + String(Math.ceil(file.size / 1024)) + ' KB</strong>; modified: <strong>' + mtime.toLocaleString() + '</strong>';
                if (file.type.length > 0)
                    info_file += '; type: <strong>' + file.type + '</strong>';
                $('#selected_file_props').removeClass('hidden-xs-up').html(info_file);
                $('#submit_upload_button').removeClass('hidden-xs-up');
            }
            else {
                $('#selected_file_props').addClass('hidden-xs-up');
                $('#submit_upload_button').addClass('hidden-xs-up');
                console.log('CHANGE EN FILE_INPUT Y NO VALUE??');
            }
        });
        // Firefox bug fix
        $input.on( 'focus', function(){ $input.addClass( 'has-focus' ); }).on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
    });
</script>
{% endblock %}