{% set views=None %}
{% if views %}
    <div class="row">
        <ul class="nav nav-pills justify-content-center">
            {% for subview in views %}
                {% if app %}
                    {% if active_subview_name and subview.name == active_subview_name %}
                    <li class="nav-item">
                    <a class="nav-link active" href="?app={{app.name | lower}}&view={{view.name}}&subview={{subview.name}}">{{subview.name}}</a> 
                    </li>
                    {% else %}
                    <li class="nav-item">
                    <a class="nav-link" href="?app={{app.name | lower}}&view={{view.name}}&subview={{subview.name}}">{{subview.name}}</a> 
                    </li>
                    {% endif %}
                {% else %}
                    {% if active_subview_name and subview.name == active_subview_name %}
                    <li class="nav-item">
                        <a class="nav-link active" href="?view={{view.name}}&subview={{subview.name}}">{{subview.name}}</a> 
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="?view={{view.name}}&subview={{subview.name}}">{{subview.name}}</a> 
                    </li>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </ul>
    </div>
    <div class="row">
        <div class="col-12">
            {% for subview in views %}
                {% if active_subview_name and subview.name == active_subview_name %}
                    {% with item=item, items=items, view=subview %}
                        {% include "view.html" %}
                    {% endwith %}
                {% endif %}
            {% endfor %}
        </div>
        
    </div>
{% else %}
    {% if view['type'] == 'ListView' %}
    <div class="row  justify-content-center align-items-center">
        <div class="col-auto .text-center">
            <table class="table table-fit table-striped w-auto table-responsive">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Icon</th>
                        <th scope="col">Name</th>
                        {% if view.columns %}
                            {% for column in view.columns%}
                                <th>
                                    {{column}}
                                </th>
                            {% endfor %}    
                        {% endif %}
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                {% for item in items %}
                    <tr >
                        <th scope="row">
                            {{loop.index}}
                        </th>
                        <th scope="row">
                            {% if item.attributes %}
                            <i class="material-icons mr-1">{{item.attributes['icon']}}</i>
                            {% endif %}
                        </th>
                        <td>
                            {% if item.attributes['resource'] %}
                                <a  href="/{{item.attributes['resource']}}/{{item.id}}">{{item.name}}</a>
                            {% else %}
                                <a  href="/items/{{item.id}}">{{item.name}}</a>
                            {% endif %}
                        </td>
                        {% if view.columns %}
                            {% for column in view.columns%}
                                <td>
                                    {{column}}
                                </td>
                            {% endfor %}    
                        {% endif %}
                        <td>
                            <div class="btn-group mr-2" role="group" aria-label="Second group">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <i class="material-icons mr-1">more_vert</i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                  <button data-toggle="modal" data-target="#form_Edit" class="dropdown-item" type="button"><i class="material-icons mr-1">edit</i>Edit</button>
                                  <button data-toggle="modal" data-target="#form_Delete" class="dropdown-item" type="button"><i class="material-icons mr-1">delete</i>Delete</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% elif view['type'] == 'AttributesView' %}
    <div class="row  justify-content-center align-items-center">
        <div class="col-md-12">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Value</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                {% for key,value in item.attributes.items() %}
                    <tr >
                        <th scope="row">
                            {{loop.index}}
                        </th>
                        <td>
                            {{key}}
                        </td>
                        <td>
                            {{value}}
                        </td>
                        <td>
                            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                <div class="btn-group mr-2" role="group" aria-label="First group">
                                    <a href="{{root_path}}edit=true&item_id={{item.id}}" class="btn btn-warning">Edit</a>
                                </div>
                                <div class="btn-group mr-2" role="group" aria-label="Second group">
                                    <a href="{{root_path}}delete=true&item_id={{item.id}}" class="btn btn-danger">Delete</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% elif view['type'] == 'CodeView' %}
      <div class="row justify-content-end mb-1 mt-1">
        <div class="col-10">
            <input type="hidden" id="language" value="python">
        </div>
        <div class="col-2">
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group mr-2" role="group" aria-label="First group">
                  <button type="button" class="btn btn-success ml-2 mr-2">Reset</button>
                  <button type="button" class="btn btn-warning" id="save">Save</button>
                </div>
            </div>
        </div>
      </div>
      <div class="row justify-content-center align-items-center">
        <div class="col-md-12">
          <div id="editor" style="min-height: 85vh; width:100%;"># Code goes here....</div>
        </div>
      </div>
    <script src="{{url_for('static', filename='/scripts/ace/ace.js')}}"></script>
    <script src="{{url_for('static', filename='/scripts/ace/ext-beautify.js')}}"></script>
    <script>
        $(document).ready(function(){
        var editor = ace.edit("editor");
        editor.setOption("useWorker", false);
        //console.log(editor);
        editor.setTheme("ace/theme/monokai");
        editor.setFontSize("18px");
        var language = $('#language').val();
        if (language === 'javascript') {
            editor.session.setMode("ace/mode/javascript");
        } else if (language === 'python') {
            editor.session.setMode("ace/mode/python");
        } else if (language === 'json') {
            editor.session.setMode("ace/mode/json");
        } else if (language === 'html') {
            editor.session.setMode("ace/mode/html");
        } else if (language === 'css') {
            editor.session.setMode("ace/mode/css");
        }
        
        $('#save').on('click', function(event) {
            //console.log('clicked');
            const formData = new FormData();
            var ed = ace.edit("editor");

            formData.append('data', ed.getSession().getValue());
            //console.log(ed.getSession().getValue());
            $.ajax({
                    url: '/admin/filemgmt/' + $('#file_id').val() + '/edit',
                    type: 'POST',
                    data : formData,
                    processData: false,
                    contentType: false,
                    success: function(result){ 
                    window.location.reload();
                    }   
            });
        });
        });
    </script>
    {% else %}
    type:{{view['type']}} showing {{item.name}} with {{items | length}} items
    {% endif %}
{% endif %}