scheduleCreationPopup.hbs

<div class="{{CSS_PREFIX}}popup">
    <div class="{{CSS_PREFIX}}popup-container">
        <div class="{{CSS_PREFIX}}popup-section {{CSS_PREFIX}}dropdown {{CSS_PREFIX}}close {{CSS_PREFIX}}section-calendar{{#unless calendars.length}} {{CSS_PREFIX}}hide{{/unless}}">
            <button class="{{CSS_PREFIX}}button {{CSS_PREFIX}}dropdown-button {{CSS_PREFIX}}popup-section-item">
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}calendar-dot" style="background-color: {{selectedCal.bgColor}}"></span>
                <span id="{{CSS_PREFIX}}schedule-calendar" class="{{CSS_PREFIX}}content">{{selectedCal.name}}</span>
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}dropdown-arrow"></span>
                </span>
            </button>
            <ul class="{{CSS_PREFIX}}dropdown-menu" style="z-index: {{zIndex}}">
                {{#each calendars}}
                    <li class="{{CSS_PREFIX}}popup-section-item {{CSS_PREFIX}}dropdown-menu-item" data-calendar-id="{{id}}">
                        <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}calendar-dot" style="background-color: {{bgColor}}"></span>
                        <span class="{{CSS_PREFIX}}content">{{name}}</span>
                    </li>
                {{/each}}
            </ul>
        </div>
        <div class="{{CSS_PREFIX}}popup-section">
            <div class="{{CSS_PREFIX}}popup-section-item {{CSS_PREFIX}}section-title">
            <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-title"></span>
            <input id="{{CSS_PREFIX}}schedule-title" class="{{CSS_PREFIX}}content" placeholder="{{titlePlaceholder-tmpl}}" value="{{title}}"></span>
            </div>
            <button id="{{CSS_PREFIX}}schedule-private" class="{{CSS_PREFIX}}button {{CSS_PREFIX}}section-private{{#unless isPrivate}} {{CSS_PREFIX}}public{{/unless}}">
            <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-private"></span>
            </button>
        </div>
        <div class="{{CSS_PREFIX}}popup-section">
            <div class="{{CSS_PREFIX}}popup-section-item {{CSS_PREFIX}}section-location">
            <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-location"></span>
                <input id="{{CSS_PREFIX}}schedule-location" class="{{CSS_PREFIX}}content" placeholder="{{locationPlaceholder-tmpl}}" value="{{location}}"></span>
            </div>
        </div>
        <div class="{{CSS_PREFIX}}popup-section">
            <div class="{{CSS_PREFIX}}popup-section-item {{CSS_PREFIX}}section-start-date">
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-date"></span>
                <input id="{{CSS_PREFIX}}schedule-start-date" class="{{CSS_PREFIX}}content" placeholder="{{startDatePlaceholder-tmpl}}"></span>
                <div id="{{CSS_PREFIX}}startpicker-container" style="margin-left: -1px; position: relative"></div>
            </div>
            <span class="{{CSS_PREFIX}}section-date-dash">-</span>
            <div class="{{CSS_PREFIX}}popup-section-item {{CSS_PREFIX}}section-end-date">
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-date"></span>
                <input id="{{CSS_PREFIX}}schedule-end-date" class="{{CSS_PREFIX}}content" placeholder="{{endDatePlaceholder-tmpl}}"></span>
                <div id="{{CSS_PREFIX}}endpicker-container" style="margin-left: -1px; position: relative"></div>
            </div>
            <div class="{{CSS_PREFIX}}popup-section-item {{CSS_PREFIX}}section-allday">
                <input id="{{CSS_PREFIX}}schedule-allday" type="checkbox" class="{{CSS_PREFIX}}checkbox-square"{{#if isAllDay}} checked{{/if}}></input>
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-checkbox"></span>
                <span class="{{CSS_PREFIX}}content">{{{popupIsAllDay-tmpl}}}</span>
            </div>
        </div>
        <div class="{{CSS_PREFIX}}popup-section {{CSS_PREFIX}}dropdown {{CSS_PREFIX}}close {{CSS_PREFIX}}section-state">
            <button class="{{CSS_PREFIX}}button {{CSS_PREFIX}}dropdown-button {{CSS_PREFIX}}popup-section-item">
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-state"></span>
                <span id="{{CSS_PREFIX}}schedule-state" class="{{CSS_PREFIX}}content">{{#if state}}{{state}}{{else}}{{{popupStateBusy-tmpl}}}{{/if}}</span>
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}dropdown-arrow"></span>
            </button>
            <ul class="{{CSS_PREFIX}}dropdown-menu" style="z-index: {{zIndex}}">
                <li class="{{CSS_PREFIX}}popup-section-item {{CSS_PREFIX}}dropdown-menu-item">
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}none"></span>
                <span class="{{CSS_PREFIX}}content">{{{popupStateBusy-tmpl}}}</span>
                </li>
                <li class="{{CSS_PREFIX}}popup-section-item {{CSS_PREFIX}}dropdown-menu-item">
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}none"></span>
                <span class="{{CSS_PREFIX}}content">{{{popupStateFree-tmpl}}}</span>
                </li>
            </ul>
        </div>
        <button class="{{CSS_PREFIX}}button {{CSS_PREFIX}}popup-close"><span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-close"></span></button>
        <div class="{{CSS_PREFIX}}section-button-save"><button class="{{CSS_PREFIX}}button {{CSS_PREFIX}}confirm {{CSS_PREFIX}}popup-save"><span>{{#if isEditMode}}{{{popupUpdate-tmpl}}}{{else}}{{{popupSave-tmpl}}}{{/if}}</span></button></div>
    </div>
    <div id="{{CSS_PREFIX}}popup-arrow" class="{{CSS_PREFIX}}popup-arrow {{CSS_PREFIX}}arrow-bottom">
        <div class="{{CSS_PREFIX}}popup-arrow-border">
            <div class="{{CSS_PREFIX}}popup-arrow-fill"></div>
        </div>
    </div>
</div>