<div ng-show="program">
    <div class="modal" tabindex="-1" role="dialog" style="display: block; background-color: rgba(0, 0, 0, .5);">
        <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
            <div class="modal-content">
                <div>
                    <div class="modal-header">
                        <h5 class="modal-title">Program Config (EPG)</h5>
                    </div>
                </div>
                <div class="modal-body container">
                    <select ng-model="program.type" class="pull-right">
                        <option>movie</option>
                        <option>episode</option>
                        <option>track</option>
                    </select>
                    <div ng-if="program.type === 'track'">
                        <label>Track Title
                            <span class="text-danger pull-right">{{error.title}}</span>
                        </label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.title"></input>
                        <label>Subtitle</label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.subtitle"></input>
                        <label>Summary</label>
                        <textarea class="form-control form-control-sm" ng-model="program.summary"></textarea>
                        <label>Rating</label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.rating"></input>
                        <label>Icon</label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.icon"></input>
                        <h6>Icon Preview</h6>
                        <div class="text-center">
                            <img class="img" ng-src="{{program.icon}}" style="max-width: 200px;"></img>
                        </div>
                    </div>
                    <div ng-if="program.type === 'movie'">
                        <label>Movie Title
                            <span class="text-danger pull-right">{{error.title}}</span>
                        </label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.title"></input>
                        <label>Subtitle</label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.subtitle"></input>
                        <label>Summary</label>
                        <textarea class="form-control form-control-sm" ng-model="program.summary"></textarea>
                        <label>Rating</label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.rating"></input>
                        <label>Icon</label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.icon"></input>
                        <h6>Icon Preview</h6>
                        <div class="text-center">
                            <img class="img" ng-src="{{program.icon}}" style="max-width: 200px;"></img>
                        </div>
                    </div>
                    <div ng-if="program.type === 'episode'">
                        <label>Show Title
                            <span class="text-danger pull-right">{{error.showTitle}}</span>
                        </label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.showTitle"></input>
                        <label>Episode Title
                            <span class="text-danger pull-right">{{error.title}}</span>
                        </label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.title"></input>
                        <label>Season
                            <span class="text-danger pull-right">{{error.season}}</span>
                        </label>
                        <input class="form-control form-control-sm" type="number" ng-model="program.season"></input>
                        <label>Episode
                            <span class="text-danger pull-right">{{error.episode}}</span>
                        </label>
                        <input class="form-control form-control-sm" type="number" ng-model="program.episode"></input>
                        <label>Summary</label>
                        <textarea class="form-control form-control-sm" ng-model="program.summary"></textarea>
                        <label>Rating</label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.rating"></input>
                        <label>Icon</label>
                        <input class="form-control form-control-sm" type="text" ng-model="program.icon"></input>
                        <h6>Icon Preview</h6>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="text-center">
                                    <img class="img" ng-src="{{program.icon}}" style="max-width: 200px;"></img>
                                </div>
                            </div>
                            <div class="col-sm-6 row" ng-if="program.showIcon">
                                <div class="col-sm-6 text-center">
                                    <label>Show</label>
                                    <img class="img" ng-src="{{program.showIcon}}" style="max-width: 75px; cursor: pointer;" ng-click="program.icon = program.showIcon"></img>
                                </div>
                                <div class="col-sm-6 text-center">
                                    <label>Season</label>
                                    <img class="img" ng-src="{{program.seasonIcon}}" style="max-width: 75px; cursor: pointer;" ng-click="program.icon = program.seasonIcon"></img>
                                </div>
                                <div class="col-sm-12 text-center">
                                    <label>Episode</label>
                                    <img class="img" ng-src="{{program.episodeIcon}}" style="max-width: 150px; cursor: pointer;" ng-click="program.icon = program.episodeIcon"></img>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-link" ng-click="program = null">Cancel</button>
                    <button type="button" class="btn btn-sm btn-primary" ng-click="finished(program);">Done</button>
                </div>
            </div>
        </div>
    </div>

</div>