@(extractors: List[ExtractorInfo], file: File, folderHierarchy: List[Folder], spaces:List[ProjectSpace], allDatasets: List[Dataset])(implicit user: Option[models.User])
@import _root_.util.Formatters._

@main("Extractions") {
    <ol class="breadcrumb">
        @if(spaces.length == 1 ) {
            <li><span class="glyphicon glyphicon-hdd"></span> <a href="@routes.Spaces.getSpace(spaces.head.id)" title="@spaces.head.name"> @Html(ellipsize(spaces.head.name, 18))</a></li>

        } else {
            @if(spaces.length > 1) {
                <li>
                    <span class="dropdown">
                        <button class="btn-link dropdown-toggle" type="button" id="dropdown_space_list" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                            <span class="glyphicon glyphicon-hdd"></span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" arialanelledby="dropdown_space_list">
                        @spaces.map{ s =>
                            <li><a href="@routes.Spaces.getSpace(s.id)" title="s.name"><span class="glyphicon glyphicon-hdd"></span> @Html(ellipsize(s.name, 18))</a></li>
                        }
                        </ul>

                    </span>
                </li>
            } else {
                <li><span class="glyphicon glyphicon-user"></span> <a href = "@routes.Profile.viewProfileUUID(file.author.id)"> @file.author.fullName</a></li>
            }
        }
        @if(allDatasets.length == 1 ) {
            @allDatasets.map { ds =>
                <li> <span class="glyphicon glyphicon-briefcase"></span> <a href="@routes.Datasets.dataset(ds.id)" title="@ds.name"> @Html(ellipsize(ds.name, 18))</a></li>
            }
        }
        @folderHierarchy.map { fd =>
            <li><span class="glyphicon glyphicon-folder-close"></span> <a href="@routes.Datasets.dataset(allDatasets(0).id)#folderId=@fd.id" title="@fd.displayName">@Html(ellipsize(fd.displayName, 18))</a></li>
        }
        <li><span class="glyphicon glyphicon-file"></span> <a href="@routes.Files.file(file.id)"title="@file.filename">@Html(ellipsize(file.filename, 18))</a></li>
        <li><span class="glyphicon glyphicon-fullscreen"></span> Submit for Extraction</li>

    </ol>
    <div class="row">
        <div class="col-xs-12">
            <h1>Submit file for extraction</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <p>Submit this file to a specific extractor below by providing parameters as a JSON document and clicking
                the submit button. The paramaters field can be left empty.</p>
            <p>File name: <a href="@routes.Files.file(file.id)">@file.filename</a></p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>Extractor's Name</th>
                        @*<th>Parameters</th>*@
                        <th>Submit</th>
                    </tr>
                </thead>
                <tbody>
                    @for(e <- extractors) {
                        <tr>
                            <td>@e.name</td>
                            @*<td><textarea id="@(e.name.replaceAll("\\.", "_"))_textarea"></textarea></td>*@
                            <td><button class="btn btn-primary" onclick="submit('@e.name','@(e.name.replaceAll("\\.", "_"))_textarea','@file.id')">Submit</button></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        function submit(extractor_name, textbox_id, file_id) {
            //TODO: comment out since no extractors use parameters, may enable it in future.
            //var params = $('#'+textbox_id).val();
            //if (params === "") params = "{}";
            var dataBody = {'extractor': extractor_name/*, 'parameters': JSON.parse(params)*/};
            var request = jsRoutes.api.Extractions.submitFileToExtractor(file_id).ajax({
                data: JSON.stringify(dataBody),
                type: 'POST',
                contentType: "application/json",
            });

            request.done(function (response, textStatus, jqXHR){
                notify("Submitted successfully", "success");
            });

            request.fail(function (jqXHR, textStatus, errorThrown){
                console.error("The following error occured: " + textStatus, errorThrown);
            });
        }
    </script>
}