<div class="row">
    <div class="col-sm-12">
	    <label for="apiVersion">
	    	API Version: v{{settings.apiVersion}}
	    	<small ng-if="settings.apiVersion < 2"> (classic)</small>
	    	<small ng-if="settings.apiVersion >= 2"> (AEM Mobile)</small>
	    </label> 
    </div>  
</div>

<hr />
<BR/>

<!-- Adobe API Secret / Key -->
<div class="row">
	<div class="col-sm-12">
        <div class="form-group">
            <label for="secret">Company</label>
            <input 	type="text" 
					class="form-control" 
					name="company" 
					placeholder="Company Name" 
					ng-model="settings.company" />
        </div>  
    </div> 
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="key">Adobe <b>Key *</b></label>
            <input 	type="text" 
					class="form-control" 
					name="key" 
					placeholder="Adobe Key" 
					ng-model="settings.key" />
        </div>                    
    </div>    
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="secret">Adobe <b>Secret *</b></label>
            <input 	type="text" 
					class="form-control" 
					name="secret" 
					placeholder="Adobe Secret" 
					ng-model="settings.secret" />
        </div>  
    </div>  
</div>

<!-- API Credentials -->
<div class="row" ng-if="settings.apiVersion > 1">
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="device_id">Device ID *</label>
            <input 	type="text" 
					class="form-control" 
					name="device_id" 
					placeholder="Device ID" 
					ng-model="settings.device_id" />
        </div>                    
    </div>
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="device_token">Device Token *</label>
            <textarea
					class="form-control" 
					name="device_token" 
					placeholder="Device Token" 
					rows="6"
					ng-model="settings.device_token"></textarea>
        </div>                    
    </div>           
                                              
</div>

<!-- CLASSIC USERNAME PASS -->
<div class="row" ng-if="settings.apiVersion < 2">
    
    <div class="col-sm-6">
        <div class="form-group">
            <label for="exampleInputEmail1">Adobe <b>Username</b></label>
            <input 	type="text" 
					class="form-control" 
					name="adobeUser" 
					placeholder="Adobe Password" 
					ng-model="settings.login" />
        </div>                    
    </div>    
    
    <div class="col-sm-6">
        <div class="form-group">
            <label for="exampleInputEmail1">Adobe <b>Password</b></label>
            <input 	type="password" 
					class="form-control" 
					name="adobePass" 
					placeholder="Adobe Password" 
					ng-model="settings.password" />
        </div>  
    </div>                   
                                              
</div>

<!-- RULE -->
<BR/>
<hr class="gray" /> 
<BR/>

<!-- ADVANCED SETTINGS -->
<div class="row">
	<div class="col-sm-12">
		<label>Advanced API Options</label>
		<p>Changing the values below could break the connection with Adobe's API. Please only change these options if you know absolutely what you're doing.</p>
		<button class="btn btn-default" ng-click="show.advanced = show.advanced ? false : true"><span class="glyphicon glyphicon-cog"></span> {{show.advanced ? "Hide" : "Show"}} Advanced API Settings</button>
		<BR/>
	</div>
</div>

<div class="row" ng-show="show.advanced">
	<BR/>
	<div class="col-sm-12">
        <div class="form-group">
            <label for="refresh_token">Refresh Token</label>
            <textarea
					class="form-control" 
					name="refresh_token" 
					placeholder="Refresh Token" 
					rows="6"
					ng-model="settings.refresh_token" />
        </div>                    
    </div>
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="access_token">Access Token</label>
            <textarea 
					class="form-control" 
					name="access_token" 
					placeholder="Access Token" 
					rows="6"
					ng-model="settings.access_token" />
        </div>                    
    </div>
    
    <div class="col-sm-12">
	    <BR/>
    	<h3>Endpoints</h3>
		<p>Please do not update the endpoints below unless you know exactly what you are doing. To restore the endpoints back to their defaults, delete them and save.</p>
		<BR/>
    </div>
    <div class="col-sm-12">
        <div class="form-group">
            <label for="refresh_token">Authentication Endpoint</label>
            <input 	type="text" 
					class="form-control" 
					name="refresh_token" 
					placeholder="Authentication Endpoint" 
					ng-model="settings.authentication_endpoint" />
        </div>                    
    </div> 
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="refresh_token">Authorization Endpoint</label>
            <input 	type="text" 
					class="form-control" 
					name="refresh_token" 
					placeholder="Authorization Endpoint" 
					ng-model="settings.authorization_endpoint" />
        </div>                    
    </div>  
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="refresh_token">Ingestion Endpoint</label>
            <input 	type="text" 
					class="form-control" 
					name="refresh_token" 
					placeholder="Ingestion Endpoint" 
					ng-model="settings.ingestion_endpoint" />
        </div>                    
    </div> 
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="refresh_token">Producer Endpoint</label>
            <input 	type="text" 
					class="form-control" 
					name="refresh_token" 
					placeholder="Producer Endpoint" 
					ng-model="settings.producer_endpoint" />
        </div>                    
    </div>            
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="refresh_token">Product Endpoint</label>
            <input 	type="text" 
					class="form-control" 
					name="refresh_token" 
					placeholder="Product Endpoint" 
					ng-model="settings.product_endpoint" />
        </div>                    
    </div>  
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="portal_url">Portal URL</label>
            <input 	type="text" 
					class="form-control" 
					name="portal_url" 
					placeholder="Product Endpoint" 
					ng-model="settings.portal_url" />
        </div>                    
    </div> 
    
</div>