<!-- Activity serviceProfessionalServiceEditor -->
<div data-activity="serviceProfessionalServiceEditor"class="Boxes-sm animated">
    <app-inline-user-menu data-bind="visible: !isInOnboarding()"></app-inline-user-menu>
    <app-onboarding-menu data-bind="visible: isInOnboarding"></app-onboarding-menu>
    <div class="container">
        <div class="row">
            <div data-bind="visible: !isInOnboarding()" class="SubSectionNavBar hidden-xs hidden-sm">
                <ul>
                    <li>
                        <a href="#" data-shell="goBack"><i class="fa fa-fw ion-ios-arrow-thin-left"></i> Back</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-7 col-sm-reset">
                <form id="offeringForm" role="form" class="container-fluid LightForm" data-bind="submit: save" aria-describedby="offeringFormInstructions">
                    <div data-bind="css: { 'is-loading': isLoading }">
                        <app-loading-spinner params="mod: 'floating'"></app-loading-spinner>
                    </div>
                    <h1><icon-dec params="icon: 'ion-ios-pricetag-outline'"></icon-dec> <span data-bind="text: title"></span></h1>
                    <div data-bind="with: current">
                        <p id="offeringFormInstructions" class="help-block" data-bind="text: type.serviceProfessionalDescription"></p>
                        <fieldset>
                            <legend><span data-bind="text: type.singularName"></span> description:</legend>
                            <div class="form-group">
                                <label for="name">Title of <span class="text-lowercase" data-bind="text: type.singularName"></span>:</label>
                                <input id="name" type="text" class="form-control" required maxlength="50" data-bind="textInput: pricing.name, disable: $root.isLocked() || !!type.fixedName()" aria-describedby="nameInstructions">
                                <!-- <div class="help-block" data-bind="if: showRemaining">Character limit: <span data-bind="text: charRemaining"></span></div> -->
                                <p id="nameInstructions" class="help-block"><span data-bind="text: type.namePlaceHolder"></span></p>
                            </div>
                            <div class="form-group" data-bind="visible: type.serviceProfessionalDescription">
                                <label for="serviceProfessionalServiceEditor-description">Description of <span class="text-lowercase" data-bind="text: type.singularName"></span>:</label>
                                <textarea id="serviceProfessionalServiceEditor-description" type="text" class="form-control" maxlength="1000" data-bind="textInput: pricing.description, disable: $root.isLocked"  aria-describedby="descriptionInstructions">
                                </textarea>
                                <p id="descriptionInstructions" class="help-block"><span data-bind="text: type.descriptionPlaceHolder"></span></p>
                                <!-- <div class="help-block" data-bind="if: showRemaining">Character limit: <span data-bind="text: charRemaining"></span></div> -->
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend><span data-bind="text: type.singularName"></span> pricing:</legend>
                            <div class="form-group" data-bind="visible: type.priceLabel">
                                <label for="serviceProfessionalServiceEditor-price" class="control-label" data-bind="text: type.priceLabel"></label>
                                <div class="input-group">
                                    <span class="input-group-addon" data-bind="text: $root.moneySymbol"></span>
                                    <input id="serviceProfessionalServiceEditor-price" type="number" class="form-control" required min="0" pattern="^\\$?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$" placeholder="$0.00" data-bind="textInput: pricing.price, disable: $root.isLocked"  aria-describedby="priceInstructions"/>
                                </div>
                                <p id="priceInstructions" class="help-block">How much does the client pay for this <span class="text-lowercase" data-bind="text: type.singularName"></span>?</p>
                            </div>
                            <div class="form-group" data-bind="visible: $root.showFirstTimeClientsOnlyLabel">
                                <input id="firstTimeClientsOnly" class="control-label" type="checkbox" data-bind="checked: pricing.firstTimeClientsOnly, disable: $root.isLocked" aria-describedby="firstTimeClientsOnlyInstructions"/>
                                <label for="firstTimeClientsOnly"><span data-bind="text: type.firstTimeClientsOnlyLabel"></span></label>
                                <p id="firstTimeClientsOnlyInstructions" class="help-block">If you check this box, we'll only show this <span class="text-lowercase" data-bind="text: type.singularName"></span> to new clients.</p>
                            </div>
                            <div class="form-inline isolated" data-bind="visible: type.numberOfSessionsLabel">
                                <div class="form-group">
                                    <label for="serviceProfessionalServiceEditor-numberOfSessions" class="control-label" data-bind="text: type.numberOfSessionsLabel()"></label>
                                    <input id="serviceProfessionalServiceEditor-numberOfSessions" class="form-control" required type="number" min="1" data-bind="textInput: pricing.numberOfSessions, disable: $root.isLocked" aria-describedby="numberOfSessionsInstructions"/>
                                    <p id="numberOfSessionsInstructions" class="help-block">Enter the number of sessions or appointments included with this <span class="text-lowercase" data-bind="text: type.singularName"></span>.</p>
                                </div>
                            </div>
                            <div data-bind="visible: type.priceRateQuantityLabel">
                                <label for="serviceProfessionalServiceEditor-priceRateQuantity serviceProfessionalServiceEditor-priceRateUnit" class="control-label" data-bind="text: type.priceRateQuantityLabel"></label>
                                <div class="row">
                                    <div class="form-group col-xs-12 col-sm-6">
                                        <div class="input-group">
                                            <label for="serviceProfessionalServiceEditor-priceRateQuantity" class="input-group-addon"> Price:</label>
                                            <input id="serviceProfessionalServiceEditor-priceRateQuantity" type="number" pattern="^\\$?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$" placeholder="$0.00" class="form-control" min="0" data-bind="textInput: pricing.priceRate, disable: $root.isLocked() || pricing.noPriceRate()" />
                                        </div>
                                    </div>
                                    <div class="form-group col-xs-12 col-sm-6" data-bind="visible: type.priceRateUnitLabel">
                                        <div class="input-group">
                                            <label for="serviceProfessionalServiceEditor-priceRateUnit" class="input-group-addon"><span data-bind="text: type.priceRateUnitLabel"></span> (unit)</label>
                                            <input id="serviceProfessionalServiceEditor-priceRateUnit" type="text" class="form-control" data-bind="textInput: pricing.priceRateUnit, disable: $root.isLocked() || pricing.noPriceRate()"/>
                                        </div>
                                    </div>
                                </div>
                                <div data-bind="visible: type.noPriceRateLabel">
                                    <input id="preferNotToStatePrice" type="checkbox" data-bind="checked: pricing.noPriceRate, disable: $root.isLocked"/>
                                    <label for="preferNotToStatePrice"><span data-bind="text: type.noPriceRateLabel"></span></label>
                                    <span data-bind="visible: type.noPriceRateLearnMoreLabel() && type.noPriceRateLearnMoreText()">
                                        <!-- IMPORTANT It's a button and no trigger to be accessible: it opens at click and closes at click/blur -->
                                        <button type="button" class="btn btn-link btn-inline"
                                            data-bind="popover: { content: type.noPriceRateLearnMoreText(), container: 'body', placement: 'top' }">
                                            (<span data-bind="text: type.noPriceRateLearnMoreLabel"></span>)
                                        </button>
                                    </span>
                                    <p id="descriptionInstructions" class="help-block">Give clients an idea of your regular pricing. <span  data-bind="visible: type.priceRateLearnMoreLabel() && type.priceRateLearnMoreText(), text: type.priceRateLearnMoreText()"></span></p>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend><span data-bind="text: type.singularName"></span> scheduling info:</legend>
                            <div class="form-group" data-bind="visible: type.durationLabel">
                                <label for="serviceProfessionalServiceEditor-durationHours serviceProfessionalServiceEditor-durationMinutes" data-bind="text: type.durationLabel"></label>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-6 form-group">
                                        <div class="input-group">
                                            <input id="serviceProfessionalServiceEditor-durationHours" type="number" required class="form-control" min="0" data-bind="textInput: pricing.durationHoursPart, disable: $root.isLocked" />
                                            <label for="serviceProfessionalServiceEditor-durationHours" class="input-group-addon">hours</label>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-6 form-group">
                                        <div class="input-group">
                                            <input id="serviceProfessionalServiceEditor-durationMinutes" type="number" required class="form-control" min="0" data-bind="textInput: pricing.durationMinutesPart, disable: $root.isLocked" />
                                            <label for="serviceProfessionalServiceEditor-durationMinutes"class="input-group-addon">minutes</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" data-bind="visible: type.inPersonPhoneLabel">
                                <label for="consultation-in-person consultation-phone" data-bind="text: type.inPersonPhoneLabel"></label>
                                <div class="row">
                                    <div class="col-xs-12 col-sm-5 form-group">
                                        <input id="consultation-in-person" type="radio" data-bind="checked: pricing.isPhone, checkedValue: false, disable: $root.isLocked()">
                                        <label for="consultation-in-person" class="form-label">in-person</label>
                                    </div>
                                    <div class="col-xs-12 col-sm-5 form-group">
                                        <input id="consultation-phone" type="radio" data-bind="checked: pricing.isPhone, checkedValue: true, disable: $root.isLocked()">
                                        <label for="consultation-phone" class="form-label">phone</label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="LightForm-submitBar">
                        <button type="submit" class="btn btn-primary btn-block" data-bind="text: submitText, disable: $root.isLocked() || !unsavedChanges(), css: { 'btn-danger': isSaving() }"></button>
                        <button type="button" class="btn btn-danger btn-block" data-bind="text: deleteText, disable: $root.isLocked, event: { click: confirmRemoval }, visible: !isNew()"></button>
                    </div>
                </form>
            </div>
            <div class="SideMenu hidden-xs hidden-sm col-md-3 col-md-offset-1">
                <app-inline-side-menu params="vocElement: 'scheduling', helpLink: helpLink"></app-inline-side-menu>
            </div>
        </div>
    </div>
</div>
