{{#if applyingValue}}
<div class="centerWrapper loadingWrapper">
    <div class="middleWrapper">
        <div class="loadingText">{{translate 'valueIsApplied'}}</div>
        <div class="alignedContent loadingAnimation"></div>
    </div>
</div>
{{else}}

<div class="dialog"> 
    <div class="dialogBody grading">
        <table class="dialogInfoTable">
            <tr>
                <td class="dialogMainInfo">{{model.Event.Designation}}</td>
               
            </tr>
            <tr>
                <td>{{subscriptionCount}} {{translate 'subscriptions'}}</td>
               
            </tr>
            <tr>
                <td class="mobile">{{translate 'grade_scale'}} {{model.Event.Scale.Designation}}</td> 
            </tr>
        </table> 

        {{#if showToolbar}}
        <div class="dialogBlockFixed dialogToolbar"> 
            <div>{{model.Event.Scale.Designation}}</div>
            <div class="gradeAllInput">
                {{#if model.Event.Scale.FreeGrading}}
                {{number-textbox class='freeGradingInput' value=applyToAllValue minValue=model.Event.Scale.MinGrade maxValue=model.Event.Scale.MaxGrade action='applyToAll'}}
                {{else}}
                {{combo-box source=allGrades keyName="Id" valueName="Designation" value=applyToAllValue}}
                {{/if}}
            </div>
            <div>
                <button type="button" class="textButton" {{action 'setAsDefault'}}>
                    <span class="material-icons">arrow_right_alt</span>
                    <div>{{translate 'setAsDefault'}}</div>
                </button>
            </div>
            <div class="verticalSpacer"></div>
            <div>
                <button {{action 'deleteAllGrades'}} type="button" class="textButton">
                    {{icon 'delete'}}
                    <div>{{translate 'deleteAllGrades'}}</div>
                </button>
            </div> 
            <div class="spacer"></div>
            <div class="buttonContainer" style="position: relative;">
                {{#if showExcelButton}}
                {{#context-menu-button id='btnExcelGradingList' icon='excel' forceClose='forceCloseExcel' right=true}}
                <a href="{{excelUrl}}" target="_blank">{{translate 'downloadExcelGradingList'}}</a>
                <div>
                    {{translate 'uploadExcelGradingList'}}<br/>
                    {{input id='fluExcelGradingList' type="file"}}
                    <button id="btnUploadExcelGradingList" type="button" {{action 'uploadExcel'}}>{{icon 'continue'}}</button>
                </div>
                {{/context-menu-button}}
                {{/if}}
            </div>
        </div>
        {{else}}
        <div class="dialogToolbar" style="height: 0px;"></div>
        {{/if}}
        {{#if model.hasNothingToShow}}
        <div class="validationErrorMessage">
            {{translate 'gradingNothingToShow'}}
        </div>
        {{else}}

        <div class="mobile table-options">
            <div class="table-options__buttons">
                {{#each availableHeaders.data as |item|}}
                <button {{action 'setSelectedColumn' item}} class="{{if item.isActive 'active' ''}} option-button">{{item.header}}</button>
                {{/each}}
            </div>
            <div class="more-menus">
                {{#unless model.Event.Scale.FreeGrading}}
                <button class="grade_methods_container">
                    <span id="grade_methods" class="material-icons md-24">more_vert</span>
                </button>
                {{/unless}}
            </div>
        </div>
        {{#fixed-header-table headerDetails=headerDetails class="dialogAccordionTable editTable gradigTable" calculateHeight=false currentSelecteIndex=currentHeaderIndex includeElementsAfterParentForCalculation='.dialogBlockFixed' noFixedHeader=true useCustomSort=true onSort='customTableSort'}}
        <thead class="actual-header">
            <tr>
                {{#if hasSDsForDetailsView}}
                <th class="iconColumn">
                    <div style="visibility: hidden;" class="collapseTriangle triangleCollapsed"></div>
                </th>
                {{/if}}
                <th class="iconColumn">
                    <div style="visibility: hidden;">
                        {{icon 'checkmark'}}
                    </div>
                </th>
                <th initial-sort is-sortable data-sort-property="PersonFullname">{{translate 'name'}}</th>
                {{#if model.Event.Scale}}
                <th is-sortable data-sort-property="{{if scale.FreeGrading 'GradeValue' 'IdGrade'}}" class="{{unless availableHeaders.grade.isVisible 'hide-column' '' }}">{{translate 'grade'}}</th>

                {{#if model.Event.Scale.CommentsAllowed}}
                <th style="width: 46%" class="{{unless availableHeaders.comment.isVisible 'hide-column fix-width' '' }}">{{translate 'comment'}}</th>
                {{/if}}
                {{/if}}
                {{#each headerDetails as |header|}}
                <th class="{{unless header.isVisible 'hide-column' ''}}">{{header.VssBezeichnung}}</th>
                {{/each}}
            </tr>
        </thead>
        <tbody>
            {{#each model.GradingItems as |item|}}
            {{grading-item model=item columnVisibility=availableHeaders allSubscriptionDetails=model.SubscriptionDetails scale=model.Event.Scale hasADsForDetailsView=hasADsForDetailsView save='saveGradingItem' saveSubscriptionDetail='saveSubscriptionDetail' hadNothingToShow='gradingItemHadNothingToShow' isReadOnly=isReadOnly}}
            {{/each}}
        </tbody>
        {{/fixed-header-table}}
        {{/if}}
    </div>
    <div class="dialogFooter">
        {{#unless hasNothingToShow}}
        <div class="buttonDiv">
            {{#if model.Event.Scale}}
            <button type="button" class="textButton" {{action 'continue'}}>
                {{#if isWaiting}}
                {{icon 'loadingAnimation'}}
                {{else}}
                <span class="material-icons">arrow_right_alt</span>
                {{/if}}
                <div>{{translate 'continueToStatistics'}}</div>
            </button>
            {{else}}
            <button type="button" class="textButton" {{action 'finish'}}>
                <span class="material-icons">arrow_right_alt</span>
                <div>{{translate 'finalizeGrading'}}</div>
            </button>
            {{/if}}
        </div>
        <div class="buttonDiv">
            <button type="button" class="textButton" {{action 'back'}}>
                <span class="material-icons reverse">arrow_right_alt</span>
                <div>{{translate 'backToGrading'}}</div>
            </button>
        </div>
        {{/unless}}
    </div>
</div>
<div class="mobile settings-overlay {{if toggleModal 'show' 'hide'}}">
    {{#overlay-dialog  hideFooter=true  title=modalHeaderText hideClose=true}}
    <div class="modal_container">
        <div class="delete_notes {{if showDeleteNoteModal 'show' 'hide'}}"> 
            <div class="buttons">
                <button class="option-button" {{action 'cancelClicked'}}>{{translate 'cancel'}}</button>
                <button class="option-button active" {{action 'deleteAllGrades'}}>{{translate 'deleteAllGrades'}}</button>
            </div>
        </div>
        <div class="default_notes {{if showDefaultNoteModal 'show' 'hide'}}">
            <div class="content_body"> 
                <div>
                    {{#if model.Event.Scale.FreeGrading}}
                    {{number-textbox value=applyToAllValue number=model.GradeValue minValue=model.Event.Scale.MinGrade maxValue=model.Event.Scale.MaxGrade}}
                    {{else}}
                    {{combo-box value=applyToAllValue source=model.Event.Scale.Grades keyName="Id" valueName="Designation" }}
                    {{/if}}
                </div>
            </div>
            <div class="buttons">
                <button class="option-button" {{action 'cancelClicked'}}>{{translate 'cancel'}}</button>
                <button class="option-button active" {{action 'setAsDefault'}}>{{translate 'setAsDefault'}}</button>
            </div>
        </div>

    </div>

    {{/overlay-dialog}}
</div>
{{/if}}