<div ng-controller="CreateOrLoadController">
    <spinner ng-style="{ 'visibility': loadingLandingPage ? '' : 'hidden' }"></spinner>
    <div class="panel">
        <div class="subpanel">
            <div class="dku-title">Create or load a tree</div>
            <div>
                <div class="subpanel__form">
                    <div class="label-text">Source</div>
                    <label for="new-tree">
                        <input type="radio" id="new-tree"
                            ng-click="!config.newTree && onTreeSourceChange(true)"
                            ng-checked="config.newTree">&nbsp;Create new tree
                    </label>
                    <label for="saved-tree">
                        <input type="radio" id="saved-tree"
                            ng-click="config.newTree && onTreeSourceChange(false)"
                            ng-checked="!config.newTree">&nbsp;Load existing tree
                    </label>
                </div>
                <div class="subpanel__form" ng-show="!config.newTree">
                    <div custom-dropdown
                        id="file"
                        possible-values="files"
                        item="config.file"
                        item-name="file"
                        on-change="onFileChange"
                        label="File"
                        class="custom-dropdown--set-width">
                    </div>
                </div>
                <div class="subpanel__form">
                    <div custom-dropdown
                        id="dataset"
                        ng-attr-possible-values="config.newTree ? datasets : ''"
                        item="config.dataset"
                        item-name="dataset"
                        on-change="onDatasetChange"
                        label="Dataset"
                        class="custom-dropdown--set-width">
                    </div>
                </div>
                <div class="subpanel__form">
                    <div custom-dropdown
                        id="target"
                        ng-attr-possible-values="config.newTree ? features : ''"
                        item="config.target"
                        item-name="feature"
                        label="Target"
                        class="custom-dropdown--set-width">
                    </div>
                </div>
            </div>
        </div>
        <div class="subpanel">
            <div class="dku-title">Sampling parameters</div>
            <div>
                <div class="subpanel__form">
                    <div custom-dropdown
                        id="method"
                        form="createLoad"
                        possible-values="['full', 'head', 'random']"
                        item="config.sampleMethod"
                        item-name="method"
                        on-change="onSampleMethodChange"
                        display="displaySamplingMethod"
                        label="Method">
                    </div>
                </div>
                <div ng-if="config.sampleMethod !== 'full'" class="subpanel__form">
                    <form name="forms.sampleSizeInput" class="control-group">
                        <label for="sample-size"><div class="label-text">Sample size</div></label>
                        <input id="sample-size" type="number" min="1" step="1" required ng-model="config.sampleSize" ng-keyup="$event.keyCode == 13 && (config.target || config.file) && sampleSizeInput.$valid && edit()">
                    </form>
                </div>
            </div>
        </div>
        <div class="cta-button-div">
            <button type="button" class="dku-button dku-button--cta" ng-click="edit()"
                    ng-disabled="!config.target && !config.file || config.sampleMethod && forms.sampleSizeInput.$invalid">
                Start
            </button>
        </div>
    </div>
</div>
