<!DOCTYPE html>
<html>
    <head>
        {% for src in js %}
            <script type="text/javascript" src="{{ src }}"></script>
        {% endfor %}
        {% for src in css %}
            <link type="text/css" rel="stylesheet" href="{{ src }}">
        {% endfor %}
        
        <script type="text/javascript" src="{{ url_for( 'files.send_app_files', subpath = 'functions.js' ) }}"></script>
        <link type="text/css" rel="stylesheet" href="{{ url_for( 'files.send_app_files', subpath = 'app.css' ) }}">
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";

            {% if admin %}
                var new_folder = function()
                {
                    var create_new_folder = function()
                    {
                        var selected = $( "#donor_select > option:checked" ).val() || null;
                        
                        $.ajax( {
                            url: "{{ url_for( 'afis.admin_add_new_folder' ) }}",
                            dataType: "json",
                            method: "POST",
                            data: {
                                donor_uuid: selected
                            },
                            success: function( data )
                            {
                                if( ! data.error )
                                {
                                    toastr.success( "Folder added" );
                                    setTimeout( function(){ window.location.reload(); }, 500 );
                                    
                                } else {
                                    toastr.error( "Error while creating the folder" );
                                }
                                
                                $( "#new_folder" ).remove();
                            }
                        } );
                    }
                    
                    var donor_select = $( "<select >" )
                        .attr( "id", "donor_select" )
                        .attr( "data-placeholder", "donor..." )
                        .addClass( "chosen-select" )
                    
                    donor_select.append( $( "<option />" ) );
                    
                    {% for d in donors %}
                        donor_select.append(
                            $( "<option />" )
                                .attr( "value", "{{ d[ 'uuid' ] }}" )
                                .text( "{{ d[ 'username' ] }}" )
                        );
                    {% endfor %}
                    
                    var donor_list = $( "<div />" )
                        .css( "margin-top", "5px" )
                        .append( donor_select );
                    
                    $( "<div />" )
                        .attr( "id", "new_folder" )
                        .text( "Link the AFIS search to the following donor:" )
                        .append( donor_list )
                        .dialog( {
                            title: "new AFIS folder",
                            modal: true,
                            height: 450,
                            width: 450,
                            buttons: {
                                "OK": create_new_folder,
                                "Cancel": function()
                                {
                                    $( this ).dialog( "close" );
                                },
                            },
                            open: function()
                            {
                                $( "#donor_select" )
                                    .chosen( {
                                        search_contains: true,
                                        width: "100%"
                                    } );
                                setTimeout( function(){ $( "#donor_select_chosen > a > input" ).trigger( "mousedown" ) }, 0 );
                            },
                            close: function()
                            {
                                $( this ).remove();
                            }
                        } );
                }
            {% endif %}
            
            var folders = {};
            {% for f in folders %}
                folders[ "{{ f[ 'uuid' ] }}" ] = {
                    "uuid": "{{ f[ 'uuid' ] }}",
                };
            {% endfor %}
        </script>
        
        <style type="text/css">
            #icnml_folder_list {
                display: grid;
                grid-gap: 10px;
                grid-template-columns: repeat( auto-fit, minmax( 200px, max-content ) );
                grid-auto-rows: min-content;
            }
            
            .icnml_folder_button {
                width: 120px;
                height: 120px;
            }
            .icnml_folder_button > span {
                height: 120px;
                line-height: 120px;
                vertical-align: center;
                text-align: center;
            }
            .icnml_search_bar {
                margin-bottom: 20px;
                width: 500px;
            }
        </style>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content">
            <div class="icnml_search_bar">
                <input id="search_bar" placeholder="Search for a case..."/>
            </div>
            <div id="icnml_folder_list">
                {% for f in folders %}
                    <div style="margin-bottom: 20px">
                        <div class="ui-widget-header ui-corner-top icnml_box_top">{{ f[ 'username' ] }}</div>
                        <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                            <div class="icnml_button">
                                <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only icnml_folder_button" id="edit_{{ f[ 'uuid' ] }}_button" role="button" aria-disabled="false">
                                    <span>View</span>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                
                {% if admin %}
                    <div>
                        <div class="ui-widget-header ui-corner-top icnml_box_top">New</div>
                        <div class="ui-widget-content ui-corner-bottom icnml_box_content">
                            <div class="icnml_button icnml_new_button icnml_pointer" id="icnml_new_folder_button">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        
        <script type="text/javascript">
            {% if admin %}
                {% for f in folders %}
                    $( "#edit_{{ f[ 'uuid' ] }}_button" ).on( "click", function()
                    {
                        window.location = "{{ url_for( 'afis.admin_folder_show', folder_id = f[ 'uuid' ] ) }}";
                    } );
                {% endfor %}
                
                $( "#icnml_new_folder_button" ).on( "click", new_folder );
            {% else %}
                {% for f in folders %}
                    $( "#edit_{{ f[ 'uuid' ] }}_button" ).on( "click", function()
                    {
                        window.location = "{{ url_for( 'afis.folder_show', folder_id = f[ 'uuid' ] ) }}";
                    } );
                {% endfor %}
            {% endif %}
            
            $( "#icnml_navigation_afis" )
                .addClass( "activated" );
            
            $( "#navloc" ).append(
                $( "<span />" ).text( "AFIS folders" )
            );
        </script>
    </body>
</html>
