<div ng-controller="AddWizardController" class="addwizard">
    <div class="page-title">
        <h2 translate>Add a new backup</h2>
    </div>

    <div class="card">
        <h3 style="margin-bottom: 15px;" translate>Setup options</h3>
    	<ul>
    		<li class="checkbox-container" ng-click="selection.style = 'blank'" ng-class="{selected: selection.style == 'blank'}">
	    		<input type="radio" name="blank" id="blank" ng-model="selection.style" value="blank">
                <label class="checkbox-label">
                    <span class="checkbox" ng-class="{checked: selection.style == 'blank'}">
                        <i class="ic-circle-fill"></i>
                    </span>
                    <div>
                        <div translate>Configure a new backup</div>
                        <div class="subtext" translate>Enter configuration details</div>
                    </div>
                </label>
            </li>

            <li class="checkbox-container" ng-click="selection.style = 'importfile'" ng-class="{selected: selection.style == 'importfile'}">
                <input type="radio" name="blank" id="direct" ng-model="selection.style" value="importfile">
                <label for="direct" class="checkbox-label">
                    <span class="checkbox" ng-class="{checked: selection.style == 'importfile'}">
                        <i class="ic-circle-fill"></i>
                    </span>
                    <div>
                        <div translate>Import from a file</div>
                        <div class="subtext" translate>Load a configuration from an exported job or a storage provider</div>
                    </div>
                </label>
            </li>

            <li class="checkbox-container" ng-click="selection.style = 'importfromserver'" ng-class="{selected: selection.style == 'importfromserver'}">
                <input type="radio" name="blank" id="server" ng-model="selection.style" value="importfromserver">
                <label for="server" class="checkbox-label">
                    <span class="checkbox" ng-class="{checked: selection.style == 'importfromserver'}">
                        <i class="ic-circle-fill"></i>
                    </span>
                    <div>
                        <div translate>Import from server</div>
                        <div class="subtext" translate>Load previous configurations stored on server</div>
                    </div>
                </label>
            </li>

            <!--<li class="input" ng-click="selection.style = 'importremote'">
                <input type="radio" name="blank" id="blank" ng-model="selection.style" value="importremote">
                <label for="direct">From a remote backup</label>
                <div class="subtext">Import configuration from a backup folder</div>
            </li> -->

    	</ul>
    </div>

    <div class="actions-container">
        <div style="flex: 1;"></div>
        <!-- <input class="submit next" type="button" ng-click="nextPage()" value="{{'Next' | translate}} &gt;" /> -->
        
    
        <a href class="ekup-button" ng-click="nextPage()">
            <span translate>Next</span>
            <i class="ic-chevron-right"></i>
        </a>
    </div>
</div>
