<div id="infoDialog" ng-controller="InfoModalCtrl" class="modal" role="dialog" tabindex="0">
    <!-- program_info_dialog -->

    <div class="modal-header clearfix">
        <h1 id="infoDialogTitle" class="pull-left">{{ "program.info.title" | lwcI18n }}</h1>
        <button class="close pull-right" ng-click="close()" auto-focus>
            <span class="icon-remove" aria-hidden="true"></span>
            <span class="a11yOffScreen">{{ ::"global.modal.close.a11y" | lwcI18n }}</span>
        </button>
    </div>

    <div id="infoDialogContent" class="modal-body noPadding">
        <!-- Breadcrumb -->
        <div data-e2e-info-field="programBreadcrumb" ng-if="item.breadcrumbList && item.breadcrumbList.length > 0">
            <h2 class="infoListTitle">{{ "program.info.program.label" | lwcI18n }}</h2>
            <div class="infoItem clearfix">
                <div class="breadcrumbSection clearfix">
                    <ul class="breadcrumbItems pull-left clearfix">
                        <li ng-repeat="breadcrumbData in item.breadcrumbList">
                            <lwc-breadcrumb data-e2e-info-field="lwcBreadcrumb" ng-if="breadcrumbData" crumb="breadcrumbData" on-breadcrumb-click="breadcrumbHandler($event, url, breadcrumbData)" show-ellipsis="showBreadcrumbEllipsis"></lwc-breadcrumb>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Description -->
        <div data-e2e-info-field="description" ng-hide="hideInfoItem(item.text)">
            <h2 class="infoListTitle">{{ "program.info.description.label" | lwcI18n }}</h2>
            <div class="description-text infoItem clearfix" ng-init="descrLimit=200;">
                <div ng-bind-html="item.text | ellipses:descrLimit" data-e2e-info-field="descriptionText"></div>
                <div ng-hide="item.text.length <= 200" class="pull-right">
                    <span pete-more more-text="{{ 'program.info.action.more' | lwcI18n }}" less-text="{{ 'program.info.action.less' | lwcI18n }}" more="moreDescr" on-more="descrLimit=600;" on-less="descrLimit=200;"></span>
                </div>
            </div>
        </div>

        <!-- Notebook Entries -->
        <div data-e2e-info-field="notes" ng-if="!hideInfoItem(item.notebookEntries)">
            <h2 class="infoListTitle"> {{ 'program.info.notes.label' | lwcI18n }}</h2>
            <div class="infoItem clearfix">
               <ul class="notes-list" ng-init="moreNotes=false; notesLimit=2;">
                  <li ng-repeat="note in item.notebookEntries | limitTo:notesLimit" >{{ note }}</li>
               </ul>
              <div ng-hide="item.notebookEntries.length <= 2" class="pull-right">
                <span pete-more more-text="{{ 'program.info.action.more' | lwcI18n }}" less-text="{{ 'program.info.action.less' | lwcI18n }}" more="moreNotes" on-more="notesLimit=item.notebookEntries.length;" on-less="notesLimit=2;"></span>
              </div>
            </div>
        </div>

        <!-- Activities -->
        <div data-e2e-info-field="activities" ng-if="!hideInfoItem(item.activities)">
            <h2 class="infoListTitle">{{ 'program.info.activities.label' | lwcI18n }}</h2>
            <div class="infoItem clearfix">
               <ul class="notes-list" ng-init="moreActivities=false; activitiesLimit=2;">
                  <li ng-repeat="activity in item.activities | limitTo:activitiesLimit">{{ activity }}</li>
               </ul>
              <div ng-hide="item.activities.length <= 2" class="pull-right">
                 <span pete-more more-text="{{ 'program.info.action.more' | lwcI18n }}" less-text="{{ 'program.info.action.less' | lwcI18n }}" more="moreActivities" on-more="activitiesLimit=item.activities.length;" on-less="activitiesLimit=2;"></span>
              </div>
            </div>
        </div>

        <!-- Standards -->
        <div data-e2e-info-field="standards" ng-hide="hideInfoItem(item.standards)">
            <h2 class="infoListTitle">{{ "program.info.standards.label" | lwcI18n }}</h2>
            <div class="infoItem clearfix">
                <!-- TODO: switch to def-list when directive is enhanced
                    we would need to write a repeater that excludes the wrapper markup,
                    since only dt and dd are allowed in the dl.
                    <dl>
                        <dt>{{ standard.id }}</dt>
                        <dd>{{ standard.description }}</dd>
                    </dl>
                -->
                <!-- note that scope variables are handled here in the template because this lives inside a modal which has unknown scope -->
                <ul class="standards-list" ng-init="moreStandards=false; standardsLimit=1;">
                    <li ng-repeat="standard in item.standards | limitTo:standardsLimit">
                        <div class="term">{{ standard.id | standardNumber }}</div>
                        <div class="definition">{{ standard.description }}</div>
                    </li>
                </ul>
                <div ng-hide="item.standards.length <= 1" class="pull-right">
                    <span pete-more more-text="{{ 'program.info.action.more' | lwcI18n }}" less-text="{{ 'program.info.action.less' | lwcI18n }}" more="moreStandards" on-more="standardsLimit=item.standards.length;" on-less="standardsLimit=1;"></span>
                </div>
            </div>
        </div>

        <!-- Materials -->
        <div data-e2e-info-field="materials" ng-hide="hideInfoItemFromStudent(item.materials)">
            <h2 class="infoListTitle">{{ "program.info.materials.label" | lwcI18n }}</h2>
            <div class="infoItem">
                <!-- TODO: if materials is an array, consider iterating and ng-repeating <li>s -->
                <div ng-bind-html="item.materials.join(', ')" data-e2e-info-field="materialsText"></div>
            </div>
        </div>

        <!-- Pacing -->
        <div data-e2e-info-field="pacing" ng-hide="hideInfoItemFromStudent(item.pacing)">
            <h2 class="infoListTitle">{{ "program.info.pace.label" | lwcI18n }}</h2>
            <div class="infoItem">{{ item.pacing }}</div>
        </div>

        <!-- Keywords -->
        <div data-e2e-info-field="keywords" ng-hide="hideInfoItem(item.tags)">
            <h2 class="infoListTitle">{{ "program.info.keywords.label" | lwcI18n }}</h2>
            <div class="infoItem" ng-bind-html="item.tags.join(', ')">
                <!-- TODO: if keywords is an array, consider iterating and ng-repeating <li>s -->
            </div>
        </div>

        <!-- Author -->
        <div data-e2e-info-field="author" ng-hide="hideInfoItemFromStudent(item.author)">
            <h2 class="infoListTitle">{{ "program.info.author.label" | lwcI18n }}</h2>
            <div class="infoItem">{{ item.author }}</div>
        </div>

        <!-- ISBN -->
        <div data-e2e-info-field="isbn" ng-hide="hideInfoItemFromStudent(item.isbn)">
            <h2 class="infoListTitle">{{ "program.info.isbn.label" | lwcI18n }}</h2>
            <div class="infoItem">{{ item.isbn }}</div>
        </div>

        <!-- Levels -->
        <div data-e2e-info-field="levels" ng-hide="hideInfoItemOnLevels()">
            <h2 class="infoListTitle">{{ "program.info.levels.label" | lwcI18n }}</h2>
            <div class="infoItem">
                {{ levelsArray }}
            </div>
        </div>

        <!-- Comprehension Skills -->
        <div data-e2e-info-field="comprehensionSkills" ng-hide="hideInfoItemFromStudent(item.comprehensionSkills)">
            <h2 class="infoListTitle">{{ "program.info.comprehensionSkills.label" | lwcI18n }}</h2>
            <div class="infoItem">{{ item.comprehensionSkills.join(', ') }}</div>
        </div>

        <!-- Content Area -->
        <div data-e2e-info-field="contentAreas" ng-hide="hideInfoItemFromStudent(item.contentAreas)">
            <h2 class="infoListTitle">{{ "program.info.contentAreas.label" | lwcI18n }}</h2>
            <div class="infoItem">{{ item.contentAreas.join(', ') }}</div>
        </div>

        <!-- Genre -->
        <div data-e2e-info-field="genres" ng-hide="hideInfoItemFromStudent(item.genres)">
            <h2 class="infoListTitle">{{ "program.info.genre.label" | lwcI18n }}</h2>
            <div class="infoItem">{{ item.genres.join(', ') }}</div>
        </div>

        <!-- Text Features -->
        <div data-e2e-info-field="textFeatures" ng-hide="hideInfoItemFromStudent(item.textFeatures)">
            <h2 class="infoListTitle">{{ "program.info.textFeatures.label" | lwcI18n }}</h2>
            <div class="infoItem">{{ item.textFeatures.join(', ') }}</div>
        </div>

    </div>
    <div class="modal-footer">
        <button ng-click="close()">{{ "program.info.action.close" | lwcI18n }}</button>
    </div>
</div>