<div id="reports-widget-drawer" class="cly-drawer">
    <div class="title">
        <span id="reports-widget-drawer-create-title" data-localize='reports.create_new_report_title'></span>
        <span id="reports-widget-drawer-edit-title" data-localize='reports.edit_report_title'></span>
        <div class="close"><i id='reports-widge-close' class="ion-ios-close-empty"></i></div>
    </div>

    <div class="details">
        <input type="text" id="current_report_id" hidden/>

        <div class="section">
            <div class="label" data-localize='reports.report_name' ></div>
            <div>
                <input id="report-name-input" class="input" type="text" >
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.emails-title' ></div>
            <select id="email-list-input" placeholder="{{email-placeholder}}">
            </select>
        </div>


        <div class="section">
            <div class="label" data-localize="reports.report-type"></div>
            <div id="report-types">
                <div class="opts">
                    <div data-report-type="core" class="opt cly-grid-3 selected">
                        <div class="inner">
                            <span class="icon core"></span>
                            <span data-localize="reports.core"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.apps_desc'></div>
            <div id="reports-multi-app-dropdown" class="cly-multi-select" style="width: 100%; box-sizing: border-box;" data-max="99">
                <div class="select-inner">
                    <div class="text-container">
                        <div class="text">
                            <div class="default-text" data-localize='reports.Select_apps'></div>
                        </div>
                    </div>
                    <div class="right combo"></div>
                </div>
                <div class="select-items square" style="width: 100%;"></div>
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.include-metrics'></div>
            <div class="include-metrics">
                <div id="reports-multi-metrics-dropdown" class="cly-multi-select" style="width: 100%; box-sizing: border-box;" data-max="99">
                    <div class="select-inner">
                        <div class="text-container">
                             <div class="text">
                                    <div class="default-text" data-localize='reports.Select_metrics'></div>
                             </div>
                        </div>
                        <div class="right combo"></div>
                    </div>
                    <div class="select-items square" style="width: 100%;"></div>
                </div>
            </div> 
        </div>
        <div class="section" style="display:none; margin-bottom:50px;">
            <div class="label" data-localize='reports.include-events'>Select events to include</div>
            <div class="include-events">
                <div id="reports-multi-events-dropdown" class="cly-multi-select" style="width: 100%; box-sizing: border-box;" data-max="99">
                    <div class="select-inner">
                        <div class="text-container">
                             <div class="text">
                                    <div class="default-text" data-localize='reports.Select_events'>Select Events</div>
                             </div>
                        </div>
                        <div class="right combo"></div>
                    </div>
                    <div class="select-items square" style="width: 100%;"></div>
                </div>
            </div>
        </div>

        <div class="report-type-related-options">
        </div>

        <div class="section">
            <div class="label" data-localize='reports.frequency' ></div>
            <div id="reports-frequency" class="checks">
                <div id="daily-option" class="check selected">
                    <div class="box"></div>
                    <div class="text"  data-localize='reports.daily'></div>
                    <div class="description"  data-localize='reports.daily-description'></div>
                 </div>
                <div id="weekly-option" class="check">
                    <div class="box"></div>
                    <div class="text"  data-localize='reports.weekly'></div>
                    <div class="description"  data-localize='reports.weekly-description'></div>
                 </div>
                 <div id="monthly-option" class="check">
                    <div class="box"></div>
                    <div class="text"  data-localize='reports.monthly'></div>
                    <div class="description"  data-localize='reports.monthly-description'></div>
                 </div>
            </div>
        </div>

        <div class="section" id="reports-dow-section" >
            <div class="label" data-localize='reports.dow' ></div>
            <div id="reports-dow" class="cly-select" style="width: 100%; box-sizing: border-box;">
                <div class="select-inner">
                    <div class="text-container">
                        <div class="text">
                            <div class="default-text" data-localize='reports.select_dow'></div>
                        </div>
                    </div>
                    <div class="right combo"></div>
                </div>
                <div class="select-items square" style="width: 100%;"></div>
            </div>
        </div>

        <div class="section">
            <div class="label" data-localize='reports.time_desc' ></div>
            <div class="time-and-zone">
                <div id="reports-time-dropdown" class="cly-select" style="width: 100%; box-sizing: border-box;">
                    <div class="select-inner">
                        <div class="text-container">
                            <div class="text">
                                <div class="default-text" data-localize='reports.select_time'></div>
                            </div>
                        </div>
                        <div class="right combo"></div>
                    </div>
                    <div class="select-items square" style="width: 100%;"></div>
                </div>
                <div id="reports-timezone-dropdown" class="cly-select" style="width: 100%; box-sizing: border-box;">
                    <div class="select-inner">
                        <div class="text-container">
                            <div class="text">
                                <div class="default-text" data-localize='reports.select_timezone'></div>
                            </div>
                        </div>
                        <div class="right combo"></div>
                    </div>
                    <div class="select-items square" style="width: 100%;"></div>
                </div>
            </div>

        </div>

    </div>

    <div class="buttons">
            <div id="reports-create-widget" class="icon-button green" data-localize='reports.Create_New_Report'></div>
            <div id="reports-save-widget" class="icon-button green" data-localize='reports.Save_Changes'></div>
    </div>
</div>

