<div class="{{CSS_PREFIX}}popup">
    <div class="{{CSS_PREFIX}}popup-container">
        <div class="{{CSS_PREFIX}}popup-container-project">
            <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>
                </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>
            <span class="{{CSS_PREFIX}}section-date-dash">-</span>
            <!--TODO 프로젝트 분류 코드 schema 확인 후 구현, dropdown-button 사용 여부 확인 필요, dropdown list 생성 방법 조사 필요-->
            <!--<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>
                </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>
        <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}}">
            </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-notes">
            <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-notes"></span>
                <input id="{{CSS_PREFIX}}schedule-notes" class="{{CSS_PREFIX}}content" placeholder="{{notesPlaceholder-tmpl}}" value="{{notes}}">
            </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}}">
                <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}}">
                <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}}>
                <span class="{{CSS_PREFIX}}icon {{CSS_PREFIX}}ic-checkbox"></span>
                <span class="{{CSS_PREFIX}}content">{{{popupIsAllDay-tmpl}}}</span>
            </div>
        </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>
