<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="page-main-actions" ng-show="!$root.isMarketplaceAuthorized">
    <div class="page-actions">
        <div class="page-actions-inner">
            <div class="page-actions-buttons">
                <button ng-click="saveAuthJson()" title="Save Config" type="button" class="action-primary">
                    <span>Save Config</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="messages">
    <div ng-show="saveAuthJson.result.success === false && saveAuthJson.result !== undefined"
         class="message message-error error">
        <span class="message-text">
            {{saveAuthJson.result.message}}
        </span>
    </div>
</div>

<div ng-show="logout===true" class="messages">
    <div class="message message-success success">
        <div data-ui-id="messages-message-success">
                You have logged out
        </div>
    </div>
</div>

<div ng-show="logout===false" class="messages">
    <div class="message message-success success">
        <div data-ui-id="messages-message-success">
            Credentials Saved
        </div>
    </div>
</div>

<section class="page-inner page-columns">
    <div class="page-inner-sidebar">
        <div class="admin__page-nav _collapsed _show">
            <ul class="admin__page-nav-items">
                <li class="admin__page-nav-item item _active">
                    <a href="javascript:void(0);" class="admin__page-nav-link">
                        <span>Magento Marketplace</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="page-inner-content">
        <h2 class="page-sub-title">Magento Marketplace</h2>
        <p>Sign in to sync your Magento Marketplace purchases.</p>
        <fieldset class="form-fieldset">
            <form  ng-submit="saveAuthJson();" name="auth" role="form">
                <div class="row form-row">
                    <div class="col-m-3">
                        <label class="form-label required" for="username">Public Access Key</label>
                    </div>
                    <div class="col-m-4">
                        <div ng-show="!$root.isMarketplaceAuthorized" class="form-row">
                            <input id="username"
                                   class="form-el-input"
                                   type="text"
                                   name="username"
                                   ng-model="user.username"
                                   ng-maxlength="40"
                                   ng-class="{ 'invalid' : (auth.username.$error.required && !auth.username.$pristine)
                                   || (auth.username.$error.required && user.submitted)}"
                                   autofocus
                                   required
                                >
                            <div class="error-container">
                                This is a required field.
                            </div>
                        </div>
                        <div ng-show="$root.isMarketplaceAuthorized" class="form-row form-row-text">
                            <span>{{user.username}}</span>
                            <a href="" class="action-sign-out" ng-click="reset()">Reset</a>
                        </div>
                    </div>
                </div>
                <div class="row form-row">
                    <div class="col-m-3">
                        <label class="form-label required" for="password">Private Access Key</label>
                    </div>
                    <div  class="col-m-4">
                        <div ng-show="!$root.isMarketplaceAuthorized" class="form-row">
                            <input id="password"
                                   class="form-el-input"
                                   type="password"
                                   name="password"
                                   ng-model="user.password"
                                   ng-maxlength="40"
                                   ng-class="{ 'invalid' : (auth.password.$error.required && !auth.password.$pristine)
                                   || (auth.password.$error.required && user.submitted) }"
                                   required
                                   autocomplete="off"
                                >
                            <div class="error-container">
                                This is a required field.
                            </div>
                        </div>

                        <div  ng-show="$root.isMarketplaceAuthorized" class="form-row form-row-text">
                            <span>******</span>
                        </div>
                    </div>
                </div>
                <input type="submit" style="display:none;">
            </form>
        </fieldset>
    </div>
</section>

<div ng-hide="isAuthLoadingComplete" class="loading-mask ng-scope" data-role="loader">
    <div class="popup popup-loading">
        <div class="popup-inner">
            <img alt="Loading..." src="<?php echo $this->basePath() ?>/pub/images/loader-1.gif">
            Please wait...
        </div>
    </div>
</div>