<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<div class="nav-bar-outer-actions">
    <div class="outer-actions-inner-wrap">
        <div class="btn-wrap btn-wrap-triangle-right btn-wrap-next">
            <button type="button" class="btn btn-prime" ng-click="checkModuleConstraints()">Next</button>
        </div>
        <div class="btn-wrap btn-wrap-triangle-left btn-wrap-prev">
            <button type="button" class="btn" ng-click="previousState()">Back</button>
        </div>
    </div>
</div>

<h2 class="page-sub-title">{{$state.current.header}}</h2>

<form class="customize-your-store" name="customizeStore" role="form">
    <fieldset class="form-fieldset customize-your-store-default">
        <legend class="legend">
            Customize Your Store
        </legend>
        <?php if ($this->isSampleDataInstalled || $this->isSampleDataErrorInstallation): ?>
        <div class="row form-row">
            <div class="col-m-3">
                <label class="form-label">Sample Data</label>
            </div>
            <div class="col-m-6">
                <div class="customize-database-clean">
                    <p>
                        <?php if ($this->isSampleDataInstalled): ?>
                            You have already installed sample data. If you want to re-install it, your database has to be cleaned up
                        <?php endif; ?>
                        <?php if ($this->isSampleDataErrorInstallation): ?>
                            Your sample data is broken. If you want to re-install it, your database has to be cleaned up
                        <?php endif; ?>
                    </p>
                    <input
                        type="checkbox"
                        ng-model="store.cleanUpDatabase"
                        class="form-el-checkbox"
                        id="cleanUpDatabase"
                        >
                    <label class="form-label" for="cleanUpDatabase">
                        Clean up automatically
                    </label>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <div class="row form-row">
            <div class="col-m-3">
                <label class="form-label required" for="storeTimezone">Store Default Time Zone</label>
            </div>
            <div class="col-m-4">
                <label class="form-select-label" for="storeTimezone">
                    <select
                        id="storeTimezone"
                        class="form-el-select"
                        ng-model="store.timezone"
                        tooltip-placement="right"
                        tooltip-html-unsafe="The time zone in which your online store operates. You can change this later in Magento Admin."
                        tooltip-trigger="focus"
                        tooltip-append-to-body="true">
                        <?php foreach ( $this->timezone as $value => $label ): ?>
                            <?= "<option value=\"" . $value . "\">" . $label . "</option>" ?>
                        <?php endforeach; ?>
                    </select>
                </label>
            </div>
        </div>

        <div class="row form-row">
            <div class="col-m-3">
                <label class="form-label required" for="storeCurrency">
                    Store Default Currency
                </label>
            </div>
            <div class="col-m-4">
                <label class="form-select-label" for="storeCurrency">
                    <select
                        id="storeCurrency"
                        class="form-el-select"
                        ng-model="store.currency"
                        tooltip-placement="right"
                        tooltip-html-unsafe="The currency your store uses for price labeling, checkout, returns, credit and gift cards. You can change this later in Magento Admin."
                        tooltip-trigger="focus"
                        tooltip-append-to-body="true">
                        <?php foreach ( $this->currency as $value => $label ): ?>
                            <?= "<option value=\"" . $value . "\">" . $label . "</option>" ?>
                        <?php endforeach; ?>
                    </select>
                </label>
            </div>
        </div>

        <div class="row form-row">
            <div class="col-m-3">
                <label class="form-label required" for="storeLanguage">
                    Store Default Language
                </label>
            </div>
            <div class="col-m-4">
                <label class="form-select-label" for="storeLanguage">
                    <select
                        id="storeLanguage"
                        class="form-el-select"
                        ng-model="store.language"
                        tooltip-placement="right"
                        tooltip-html-unsafe="The language customers will see in your store. You can change this later in Magento Set Up Tool."
                        tooltip-trigger="focus"
                        tooltip-append-to-body="true">
                        <?php foreach ( $this->language as $value => $label ): ?>
                            <?= "<option value=\"" . $value . "\">" . $label . "</option>" ?>
                        <?php endforeach; ?>
                    </select>
                </label>
            </div>
        </div>
    </fieldset>

    <fieldset class="form-fieldset customize-your-store-advanced" ng-show="store.showModulesControl">
        <legend
            class="form-legend-expand"
            ng-click="updateOnExpand(store.advanced)"
            ng-class="{'expanded' : store.advanced.expanded}"
            >
            Advanced Modules Configurations
        </legend>

        <div ng-show="store.advanced.expanded">

            <div
                class="message message-error"
                ng-show="store.errorMessage !== ''&& store.errorMessage !== false"
                >
                <div class="message-text">
                    <p>
                        An error has occurred.
                        <a href="#"
                           ng-click="expandError()"
                           ng-class="{'expanded' : store.errorFlag}"
                           >
                            {{store.errorFlag ? 'Hide' : 'Show';}} details
                        </a>
                    </p>
                    <p ng-show="store.errorMessage !== '' && store.errorFlag === true"
                       ng-bind-html="store.errorMessage">
                    </p>
                    <p class="advanced-modules-skip">
                        <input id="skipDependency"
                               class="form-el-checkbox"
                               type="checkbox"
                               ng-model="store.force"
                               ng-click="toggleForce()"
                               >
                        <label class="form-label" for="skipDependency">
                            Skip dependency check for individual modules
                        </label>
                    </p>
                </div>
            </div>

            <div class="message message-spinner" ng-show="loading">
                <span class="spinner">
                    <span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span>
                </span>
                <span class="message-text">Validating Constraints for enabling/disabling modules...</span>
            </div>

            <p class="advanced-modules-select">
                <input id="selectAll" type="checkbox"
                   class="form-el-checkbox"
                   ng-checked="store.selectAll"
                   ng-click="toggleAllModules()">
                <label class="form-label" for="selectAll">
                   Select All
                </label>
            </p>

            <div class="multiselect multiselect-custom">
                <ul>
                    <li ng-repeat="module in store.allModules"
                        class="item"
                        ng-class="store.selectedModules.indexOf(module) > -1 ? 'selected' : 'notSelected'; "
                        >
                        <input
                            class="form-el-checkbox"
                            type="checkbox"
                            ng-click="toggleModule(module)"
                            ng-disabled="store.disabledModules.indexOf(module) > -1"
                            ng-checked="store.selectedModules.indexOf(module) > -1"
                            id="{{module}}"
                            >
                        <label class="form-label"
                               for="{{module}}"
                               >
                            {{module}}
                        </label>
                    </li>
                </ul>
            </div>

            <p class="advanced-modules-count">
                {{store.selectedModules.length}} out of {{store.allModules.length}} selected
            </p>

        </div>
    </fieldset>
</form>
