@(spaceList: List[models.ProjectSpace], isNameRequired: Boolean, isDescriptionRequired: Boolean, spaceId: Option[String], spaceName: Option[String], collection: Option[Collection],collectionSpaces : List[String], showAccess: Boolean)(implicit flash: play.api.mvc.Flash, user: Option[models.User])

@import models.DatasetStatus
@import play.api.i18n.Messages
@import _root_.util.Formatters._

@main(Messages("create.title", Messages("dataset.title"))) {
    <!-- Custom items for the create dataset workflow -->
    <script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" language="javascript"></script>
    <script src="@routes.Assets.at("javascripts/errorRedirect.js")" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
            //Global so that the javascript for the dataset creation can reference this.
            var isNameRequired = @isNameRequired;
            var isDescRequired = @isDescriptionRequired;
    </script>
    <div>
        <ol class="breadcrumb">
            @(spaceId, spaceName) match {
                case (Some(id), Some(name)) => {
                    <li><span class="glyphicon glyphicon-hdd"></span> <a href="@routes.Spaces.getSpace(UUID(id))" title="@name"> @Html(ellipsize(name, 18))</a></li>
                    @collection match {
                        case Some(coll) => {
                            <li><span class="glyphicon glyphicon-th-large"></span><a href="@routes.Collections.collection(coll.id)" title="@name"> @Html(ellipsize(coll.name,18))</a></li>

                        }
                        case None => {}
                     }
                }
                case (_, _) => {
                    @collection match {
                        case Some(coll) => {
                           <li> <span class="glyphicon glyphicon-th-large"></span><a href="@routes.Collections.collection(coll.id)" title="@coll.name"> @Html(ellipsize(coll.name, 18))</a></li>
                        }
                        case None => {
                            @user match {
                                case Some(u) => {<li> <span class="glyphicon glyphicon-user"></span> <a href= "@routes.Profile.viewProfileUUID(u.id)"> @Html(u.fullName) </a></li>}
                                case None => {}
                            }
                        }
                    }

                }
            }
           <li><span class="glyphicon glyphicon-briefcase"></span> @Messages("create.header", Messages("dataset.title"))</li>
        </ol>
    </div>
    <div class="page-header">
        <h1>@Messages("create.header", Messages("dataset.title"))</h1>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>@Messages("dataset.create.message", Messages("datasets.title"), Messages("dataset.title").toLowerCase, Messages("space.title"))</p>

            @if(collection.isDefined){
                <p>@Messages("dataset.create.collection.message", Messages("dataset.title").toLowerCase, Messages("collection.title").toLowerCase) <a href="@routes.Collections.collection(collection.get.id)">@collection.get.name</a></p>
            }
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div>
                <span id="status" class="success hiddencomplete alert alert-success" role="alert">A Status Message</span>
                <span class="error hiddencomplete alert alert-danger" id="messageerror">An Error Message</span>
            </div>
            <div class="form-group">
                <label id="namelabel" for="name">Name</label>
                <input type="text" class="form-control" id="name" placeholder="A short name">
                <span class="error hiddencomplete" id="nameerror">The name is a required field</span>
            </div>
            <div class="form-group">
                <label id="desclabel" for="description">Description</label>
                <textarea cols=40 rows=4 type="text" id="description" class="form-control"
                    placeholder="A longer description"></textarea>
                <span class="error hiddencomplete" id="descerror">This description is a required field</span>
            </div>
            <div class="form-group">
                <label id="spacelabel" for="space">Share with
                    @if(play.api.Play.current.plugin[services.SpaceSharingPlugin].isDefined) {
                        @Messages("spaces.title")
                     } else {
                        a @Messages("space.title")
                    }
                </label>
                <select name="space" id="spaceid" class ="chosen-select" @if(play.api.Play.current.plugin[services.SpaceSharingPlugin].isDefined){multiple}>
                @if(!play.api.Play.current.plugin[services.SpaceSharingPlugin].isDefined) {
                    <option value="">Select a @Messages("space.title") to share the @Messages("dataset.title").toLowerCase with (Optional)</option>
                }
                @spaceList.map { space =>
                        <option id="@(space.id)" value="@(space.id)">@(space.name)</option>
                    }
                    </select>
                @if(play.api.Play.current.plugin[services.SpaceSharingPlugin].isDefined) {
                    <p class="help-block">@Messages("create.share.multiple.message", Messages("dataset.title").toLowerCase, Messages("spaces.title"))</p>
                } else {
                    <p class="help-block">@Messages("create.share.one.message", Messages("dataset.title").toLowerCase, Messages("space.title"))</p>
                }

            </div>
            @if(showAccess) {
                <div class="form-group">Access:
                    <label class="radio-inline"><input type="radio" name="access" id="access-default" value="@DatasetStatus.DEFAULT.toString" checked>Default</label>
                    <label class="radio-inline"><input type="radio" name="access" id="access-private" value="@DatasetStatus.PRIVATE.toString">Private</label>
                    <label class="radio-inline"><input type="radio" name="access" id="access-public" value="@DatasetStatus.PUBLIC.toString">Public</label>
                </div>
            }

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="submit" class="btn btn-primary start"  id="createdataset" title="Create the Dataset">
                <span class="glyphicon glyphicon-ok"></span> @Messages("create.title", "")
            </button>
            <button class="btn btn-default" title="Start the dataset creation process over" onclick="return resetValues();">
                <span class="glyphicon glyphicon-unchecked"></span> Reset
            </button>
        </div>
    </div>

    <script src=@routes.Assets.at("javascripts/chosen.jquery.js") type="text/javascript"></script>
    <link rel="stylesheet" href=@routes.Assets.at("stylesheets/chosen.css")>

    <script language = "javascript">
        $(".chosen-select").chosen({
            width: "100%",
            placeholder_text_multiple: "(optional)"
        })
    </script>

    <script language = "javascript">

        function resetValues() {
            $('#name').val("");
            $('#description').val("");
            $('#spaceid').val('').trigger('chosen:updated');
        }

        var idNameObj = {};

        function isUndefined(value) {
            return typeof value === 'undefined';
        }

        function getName(id) {
            return idNameObj[id];
        }

        $(document).ready(function() {
            @for(space <- spaceList) {
                idNameObj["@space.name"] = "@space.id";
            }
             $(".chosen-choices").addClass("form-control");
        });

        $(".chosen-select").chosen().change(function(event, params) {
            var targetId = this.getAttribute("id");
            if(!isUndefined(params.selected)) {
                var addedId = params.selected;
                @for(space <- spaceList) {
                var currentId = "@space.id";
                if(currentId != targetId) {
                    $('#@space.id option [value='+addedId+']').remove();
                    $('#@space.id').trigger("chosen:updated");

                }
                }
                $('ul.chosen-choices li.search-field').css("width", "0");
            } else if(!isUndefined(params.deselected)) {
                var removedId = params.deselected;
                @for(space <- spaceList) {
                    var currentId = "@space.id";
                    if(currentId != targetId) {
                        $('#@space.id').prepend($("<option></option>").attr("value", removedId).text(getName(removedId)));
                        $('#@space.id').trigger("chosen:updated");
                    }
                }
            }
        });

        if(@spaceId.isDefined) {
            $('#@spaceId').prop('selected','selected');
            $('#spaceid').trigger("chosen:updated");
        }

        //todd_n add for loop to select id
        if(!@collectionSpaces.isEmpty){
            @for(eachId <- collectionSpaces){
            $('#@eachId').prop('selected','selected');
            $('#spaceid').trigger("chosen:updated");
            }
        }


        $(function () {
            $('#createdataset').click(function () {
                var name = $('#name');
                var desc = $('#description');
                var spaceList = [];
                $('#spaceid').find(":selected").each(function(i, selected) {
                    if($(selected).val() != "") {
                        spaceList[i] = $(selected).val();
                    }
                });
                // In case we want choose multiple collections for dataset like spaces in this page, collection is stored in a list here
                var collectionList = [];
                @if(collection.isDefined) {
                    collectionList[0] = '@collection.get.id';
                }
                var error = false;
                if (!name.val() && isNameRequired) {
                    $('#nameerror').show();
                    error = true;
                }
                if (!desc.val() && isDescRequired) {
                    $('#descerror').show();
                    error = true;
                }
                var access = $("input[name='access']:checked").val();

                if (!error) {
                    var encName = htmlEncode(name.val());
                    var encDescription = htmlEncode(desc.val());
                    var jsonData = JSON.stringify({"name": encName, "description": encDescription, "space": spaceList, "collection": collectionList, "access":access});
                    var request = jsRoutes.api.Datasets.createEmptyDataset().ajax({
                        data: jsonData,
                        type: 'POST',
                        contentType: "application/json"
                    });

                    request.done(function (response, textStatus, jqXHR){
                        location.href = jsRoutes.controllers.Datasets.createStep2(response["id"]).url;
                    });

                    request.fail(function (jqXHR, textStatus, errorThrown){
                        console.error("The following error occured: " + textStatus, errorThrown);
                        var errMsg = "You must be logged in to create a new dataset.";
                        if (!checkErrorAndRedirect(jqXHR, errMsg)) {
                            notify("Error in creating dataset. : " + errorThrown, "error");
                        }
                    });
                    return false;
                }
            });
        });
    </script>
}