{{> partials/menu}}
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
  <form id="settingsForm" data-toggle="validator">
    <div class="col-sm-12">
        <h2>{{ @root.__ "General settings" }} <span class="float-right"><button type="submit" id="btnSettingsUpdate" class="btn btn-outline-success">{{ @root.__ "Update" }}</button></span></h2>
    </div>
    <div class="col-md-12">
            <div class="form-group">
                <label>{{ @root.__ "Cart name" }} *</label>
                <input type="text" class="form-control" name="cartTitle" value="{{config.cartTitle}}" required>
                <p class="help-block">
                    {{ @root.__ "This element is critical for search engine optimisation. Cart title is displayed if your logo is hidden." }}
                </p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Cart description" }} *</label>
                <input type="text" class="form-control" name="cartDescription" value="{{config.cartDescription}}" required>
                <p class="help-block">{{ @root.__ "This description shows when your website is listed in search engine results." }}</p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Cart image/logo" }}</label>
                <input type="text" class="form-control" name="cartLogo" value="{{config.cartLogo}}">
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Cart URL" }} *</label>
                <input type="text" class="form-control" name="baseUrl" value="{{config.baseUrl}}" required>
                <p class="help-block">{{ @root.__ "This URL is used in sitemaps and when your customer returns from completing their payment." }}</p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Cart Email" }} *</label>
                <input type="email" class="form-control" name="emailAddress" value="{{config.emailAddress}}" required>
                <p class="help-block">{{ @root.__ "This is used as the \"from\" email when sending receipts to your customers." }}</p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Payment gateway" }}</label>
                <select class="form-control" name="paymentGateway">
                    <option {{selectState 'paypal' config.paymentGateway}} value="paypal">Paypal</option>
                    <option {{selectState 'stripe' config.paymentGateway}} value="stripe">Stripe</option>
                    <option {{selectState 'adyen' config.paymentGateway}} value="adyen">Adyen</option>
                    <option {{selectState 'authorizenet' config.paymentGateway}} value="authorizenet">Authorize.Net</option>
                    <option {{selectState 'instore' config.paymentGateway}} value="instore">Instore</option>
                    <option {{selectState 'blockonomics' config.paymentGateway}} value="blockonomics">Blockonomics</option>
                </select>
                <p class="help-block">{{ @root.__ "Payment_Gateway_Info" }}</p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Currency symbol" }}</label>
                <input type="text" class="form-control" name="currencySymbol" value="{{currencySymbol config.currencySymbol}}">
                <p class="help-block">{{ @root.__ "Set this to your currency symbol. Eg: $, £, €" }}</p>
            </div>
            {{#ifCond config.paymentGateway '==' 'blockonomics'}}
            <div class="form-group">
                <label>{{ @root.__ "Currency ISO" }}</label>
                <select class="form-control" name="currencyISO">
                    <option {{selectState 'USD' config.currencyISO}} value="USD">USD</option>
                    <option {{selectState 'EUR' config.currencyISO}} value="EUR">EUR</option>
                    <option {{selectState 'GBP' config.currencyISO}} value="GBP">GBP</option>
                </select>
                <p class="help-block">{{ @root.__ "Currency used for Blockonomics conversion" }}</p>
            </div>
            {{/ifCond}}          
            <div class="form-group">
                <label>{{ @root.__ "Theme" }}</label>
                <select class="form-control" name="theme">
                    {{#each themes}}
                    <option {{selectState this ../config.theme}} value="{{this}}">{{this}}</option>
                    {{/each}}
                </select>
                <p class="help-block">{{ @root.__ "Theme_Info" }}</p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Products per row" }}</label>
                <select class="form-control" name="productsPerRow">
                    <option value="{{config.productsPerRow}}" hidden="hidden" selected="selected">{{config.productsPerRow}}</option>
                    <option {{selectState '1' config.productsPerRow}}>1</option>
                    <option {{selectState '2' config.productsPerRow}}>2</option>
                    <option {{selectState '3' config.productsPerRow}}>3</option>
                    <option {{selectState '4' config.productsPerRow}}>4</option>
                </select>
                <p class="help-block">{{ @root.__ "The number of products to be displayed across the page." }}</p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Products per page" }}</label>
                <input type="number" class="form-control" name="productsPerPage" value="{{config.productsPerPage}}">
                <p class="help-block">{{ @root.__ "The number of products to be displayed on each page." }}</p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Menu Enabled" }}: </label>
                <div class="checkbox">
                    <label>
                        <input class="settingsMenuEnabled" type="checkbox" {{checkedState config.menuEnabled}} id="menuEnabled"
                            name="menuEnabled">
                    </label>
                </div>
                <p class="help-block">{{{ @root.__ "Menu_Enabled_Info" }}}</p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Menu header" }}</label>
                <input type="text" class="form-control" name="menuTitle" value="{{config.menuTitle}}" placeholder="Menu">
                <p class="help-block">{{ @root.__ "The heading text for your menu." }}</p>
            </div>
            <div class="form-group">
                <label>Footer HTML</label>
                <textarea class="form-control codemirrorArea" rows="5" id="footerHtml" name="footerHtml">{{footerHtml}}</textarea>
                <input type="hidden" id="footerHtml_input" name="footerHtml_input">
            </div>
            <div class="form-group">
                <label>Google analytics</label>
                <textarea class="form-control" rows="3" id="googleAnalytics" name="googleAnalytics">{{googleAnalytics}}</textarea>
                <input type="hidden" id="googleAnalytics_input" name="googleAnalytics_input">
                <p class="help-block">{{{ @root.__ "Google_Analytics_Info" }}}
                </p>
            </div>
            <div class="form-group">
                <label>{{ @root.__ "Custom CSS" }}</label>
                <textarea class="form-control" rows="10" id="customCss" name="customCss">{{config.customCss}}</textarea>
                <input type="hidden" id="customCss_input" name="customCss_input">
            </div>
            <div class="form-group">
                <label>Email SMTP Host</label>
                <input type="text" class="form-control" name="emailHost" value="{{config.emailHost}}" autocomplete="off" required>
            </div>
            <div class="form-group">
                <label>Email SMTP Port</label>
                <input type="text" class="form-control" name="emailPort" value="{{config.emailPort}}" autocomplete="off" required>
            </div>
            <div class="form-group">
                <label>Email SMTP secure </label>
                <div class="checkbox">
                    <label>
                        <input class="settingsMenuEnabled" type="checkbox" {{checkedState config.emailSecure}} name="emailSecure">
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label>Email SMTP Username</label>
                <input type="text" class="form-control" name="emailUser" value="{{config.emailUser}}" autocomplete="off" required>
            </div>
            <div class="form-group">
                <label>Email SMTP Password</label>
                <input type="password" class="form-control" name="emailPassword" value="{{config.emailPassword}}" autocomplete="off" required>
            </div>
            <div class="form-group">
                <button id="sendTestEmail" class="btn btn-outline-success">{{ @root.__ "Send test email" }}</button>
            </div>
    </div>
  </form>
</main>