<template name="profile">
    {{> sAlert}}
    <div id="profPageWrapper">
        <div id="backArrow" class="circleIcon moveArrow" style="display:{{showArrow 'back'}}">
            <i class="fa fa-chevron-up" aria-hidden="true"></i>
        </div>
        <div id="basicInfo">
            <div id="newUserWrapper">
                <div class="formDiv">
                    <p class="opTitle">**School:</p>
                    <input id="school" class="basicInfoField clickModify dropdown" type="text" form="school" placeholder=" Click here to edit..." readonly>
                    <div class="optionHolder">
                        {{#each selectOptions 'school'}}
                            {{> option}}
                        {{/each}}
                    </div>
               </div>
               <div class="formDiv">
                    <p class="opTitle">**Graduation Year:</p>
                    <input id="grade" class="basicInfoField clickModify dropdown" type="text" form="grade" placeholder="Click here to edit..." readonly>
                    <div class="optionHolder">
                        {{#each selectOptions 'grade'}}
                            {{> option}}
                        {{/each}}
                    </div>
               </div>
               <h3 id="basicNext">Continue</h3>
           </div>
        </div>
        <div id="enrollInfo">
            <div id="enrollUserWrapper">
                <div id="joinTop">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    {{> inputAutocomplete id="classSearch" settings=classSettings placeholder="Search..."}}
                    <span id="createActivate">Class not here?</span>
                </div>
                <div id="settingClassWrapper">
                    <div id="classHeader">
                        <div id="label" class="classBox">
                            <span class="name classText">Class Name</span>
                            <span class="teacher classText">Teacher</span>
                            <span class="hour classText">Hour</span>
                            <span class="subscriptions classText">Members</span>
                        </div>
                    </div>
                    <div id="classBody">
                        {{#if notsearching}}
                            {{#each classes}}
                                {{> classDisplay}}
                            {{/each}}
                            {{#if noclass}}
                                <h3>No results found...</h3>
                            {{/if}}
                        {{else}}
                            {{#each autocompleteClasses}}
                                {{> classDisplay}}
                            {{/each}}
                            {{#if notfound}}
                                <h3>No results found...</h3>
                            {{/if}}
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
        <div id="enrollClassList">
            <h3>My Classes</h3>
            {{#each enrollClass}}
                {{> enrollSideClass}}
            {{/each}}
        </div>
        <div id="createInfo">
            <div id="createWrapper">
                <div id="creRules">
                    <p>Submit a request for a class to be approved by an administrator. 
                    You can have up to 8 unapproved classes at once.</p>
                </div>
                <div id="formContainer">
                    <div class="formDiv">
                        <p class="profTitle">**School:</p>
                         <input id="school" class="creInput" type="text" form="school" value="{{school}}" readonly>
                   </div>
                   <div class="formDiv">
                    <p class="profTitle">Hour:</p>
                       <input class="creInput" type="text" form="hour" placeholder="Hour">
                   </div>
                   <div class="formDiv">
                        <p class="profTitle">Teacher:</p>
                        {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" form="teacher" placeholder="Teacher | Ex: Marc DeZwaan" }}
                   </div>
                   <div class="formDiv">
                        <p class="profTitle">**Class Name:</p>
                       <input class="creInput" type="text" form="name" placeholder="**Class Name">
                   </div>
                   <div class="formDiv">
                       <p class="profTitle">**Privacy:</p>
                       <input id="creprivacy" style="color:{{divColor 'textColor'}}" class="creInput clickModify dropdown" type="text" form="privacy" placeholder="Click here to edit..." readonly>
                       <div class="optionHolder">
                           {{#each selectOptions 'privacy'}}
                               {{> option}}
                           {{/each}}
                       </div>
                   </div>
                   <div class="formDiv">
                       <p class="profTitle">**Category:</p>
                       <input id="crecategory" style="color:{{divColor 'textColor'}}" class="creInput clickModify dropdown" type="text" form="category" placeholder="Click here to edit..." readonly>
                       <div class="optionHolder">
                           {{#each selectOptions 'category'}}
                               {{> option}}
                           {{/each}}
                       </div>
                   </div>
                   <h3 id="creSubmit" style="border:1px solid {{divColor 'textColor'}}">Submit Request</h3>
               </div>
            </div>
        </div>
        <div id="profileSubmit">
            <span>Finish!</span>
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </div>
        <div id="forwardArrow" class="circleIcon moveArrow" style="display:{{showArrow 'forward'}}">
            <i class="fa fa-chevron-down" aria-hidden="true"></i>
        </div>
    </div>
</template>

<template name="enrollSideClass">
    <div id="ESCWrapper" classid="{{_id}}">
        <h4 class="enrollSideClass">{{name}}</h4>
        {{#if x}}
            <i class="fa fa-times" aria-hidden="true"></i>
        {{/if}}
    </div>
</template>
