{{#Name=Display Notifications}}
{{#Description=Displays system notifications}}
{{#Version=1.0}}
{{#Author=HomeSeer}}
{{#CanBeDeleted=False}}
{{#SaveList=save_title_size,save_title_color,save_title_bold,save_summary_only,save_notification_text_size,save_notification_text_color,save_notification_background_color}}

{{includefileraw Dashboards/Cards/Custom/Common/CommonHeader.html}}

{{#get settings that will also be used in the autogenerate settings dialog. This fills the arrays above}}
{{sections[index]="Title"}}
{{title_size=get_value 'save_title_size' '18' 'Size' 'text'}}
{{title_color=get_value 'save_title_color' '#000000' 'Color' 'color'}}
{{title_bold=get_value 'save_title_bold' 'on' 'Bold' 'toggle'}}
{{sections[index]="Summary"}}
{{include_summary=get_value 'include_summary' 'on' 'Display' 'toggle'}}
{{sections[index]="Notification"}}
{{notification_text_size=get_value 'save_notification_text_size' '14' 'Size' 'text'}}
{{notification_text_color=get_value 'save_notification_text_color' '#000000' 'Color' 'color'}}
{{notification_bold=get_value 'save_notification_bold' '' 'Bold' 'toggle'}}
{{notification_background_color=get_value 'save_notification_background_color' '#FFFFFF' 'Background Color' 'color'}}


{{# normal display HTML is here. This is what is displayed when viewing the card in non-edit mode}}

<style>
.container{{w.id}} {
	{{if w.height > 0}}
	height: {{w.height}}px;
	{{end}}    	
	overflow-y: auto;
}

.title{{w.id}} {
	display: flex;
    color: {{title_color}};
	font-size: {{title_size}}px;
    align-items: center;
    justify-content: center;
	{{if title_bold=='on'}}
	font-weight: bold;
	{{end}}
    }
	
.notification_text{{w.id}} {
    color: {{notification_text_color}};
	font-size: {{notification_text_size}}px;
	{{if notification_bold=='on'}}
	font-weight: bold;
	{{end}}
    align-items: left;
    justify-content: center;
    }
	
.notification_background{{w.id}} {
	background-color: {{notification_background_color}};
}

</style>

<div class="container{{w.id}}">
	<div class="row no-gutters">
		<div class="col-12 title{{w.id}}">
		Notifications
		</div>				
	</div>


{{for notification in notification_list}}
    <div class="card mb-2 ml-2 mr-2 notification_background{{w.id}}">
        <div class="card-body rounded border p-2">
        <h5 class="card-title title{{w.id}}">
            <b>{{cd=notification_category_details notification.category}}
            {{cd.icon}}                                      
            {{notification.title}}</b></h5>
			{{if include_summary }}
				<div class="notification_text{{w.id}}">
				{{notification.message}}
				</div>
				<hr>
			{{else}}				
			{{end}}
            
            <div class="row align-items-center">
                <div class="col">
                    <button type="button" class="btn btn-default" onclick="markRead{{id_unique}}('{{notification.id}}');" >Mark Read</button>
                </div>
                <div class="col text-right notification_text{{w.id}}">
                    {{format_date notification.date_time_issued}}
                    {{if notification.is_read}}
                    <i class="fas fa-eye ml-2"></i>
                    {{end}}  
                </div>
            </div>
        </div>
                
    </div>
{{end}}
</div>

			

{{#if we are not in edit mode, don't bother including the edit mode content}}
{{if dbs.edit_mode}}
{{# card settings dialog, the second tab autogenerates settings based on values added to the settings arrays. Custom settings HTML can be added}}

{{#this dialog has 2 tabs, one for formatting the card, the other for card content}}

{{# w=widget class, dashboard=dashboard name, d=device}}
<div id="dialogs{{w.id}}">
<div class="modal pg-show-modal" id="edit_custom_card{{w.id}}" tabindex="-1" role="dialog" aria-hidden="true"> 
   <div class="modal-dialog cascading-modal"> 
	   <div class="modal-content">   
            <form id="add_to_dashboard">
            <div class="modal-c-tabs">
                <ul class="nav md-tabs tabs-2 light-blue darken-3" role="tablist">
                  <li class="nav-item">
						<a class="nav-link active" data-toggle="tab" href="#panel{{w.id}}2" role="tab"><i class="fas fa-edit mr-1"></i>
						Display</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#panel{{w.id}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
						Format</a>
					</li>
                </ul>
                <div class="tab-content mt-n4">
                    <div class="tab-pane fade" id="panel{{w.id}}1" role="tabpanel">
                        <div class="modal-body">
                            {{includefileraw Dashboards/Cards/Internal/card_appearance_settings.html}}
                        </div>
                    </div>
		                    
                    <div class="tab-pane fade in show active" id="panel{{w.id}}2" role="tabpanel">      
                        <div class="modal-body">                     
			                <p>
				               {{# Second tab which contains settings for this card only}}
							   {{# This section autogenerates settings, do not modify }}
                                {{index=0}}
                                {{for sn in save_names}}
								{{if sections[index] != null}}
									<div style="width:100%" class="streakhs grey lighten-2">
										{{sections[index]}}
									</div> 
								{{end}}
                                <div class="row no-gutters">                                    
                                    {{if control_types[index] == 'color'}}
									<div class="col-md-3 justify-content-center align-content-center">
										{{titles[index]}}                       
									</div>
									<div class="md-form input-group col-md justify-content-center text-center"> 
										<input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
									</div>
                                    <div class="md-form input-group col-md justify-content-center text-center"> 
                                        <button onclick="ShowColorPickerDialog('#{{sn}}-{{w.id}}','{{current_values[index]}}','#{{sn}}_{{w.id}}');" type="button" id="{{sn}}-{{w.id}}" class="color-square-btn" style="background-color:{{current_values[index]}};"></button>
                                    </div>									
                                    {{else if control_types[index] == 'toggle'}}									
									<div class="col-md-9 justify-content-center align-content-center">
										{{titles[index]}}                    
									</div>
									<div class="col-md-3">
										<span class="switch">
										  <label>	
												<input type="checkbox" name="{{sn}}" {{if current_values[index]=="on"}}checked{{end}}>
												<span class="lever"></span>
										  </label>
										</span>						
									</div>	
									{{else if control_types[index] == 'text'}}
                                    <div class="col-md-3 justify-content-center align-content-center">
                                        {{titles[index]}}               
                                    </div>
                                    <div class="col-md-9 md-form input-group justify-content-center text-center"> 
                                        <input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
                                    </div>
                                    {{end}}                                   					
                                </div>
                                {{index=index+1}}
                                {{end}}
								{{# Starting here, add custom settings HTML for this card }}		
														
                            </p>
				        </div>
                    </div>			        
			   
                    {{save_action='save_custom_card_edits'}}
					{{includefileraw includes/dashboard_dialogs_footer.html}}
                </div>			   
			                         
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>
</div>


{{includefileraw Dashboards/Cards/Custom/Common/CommonScript.html}}

<script>
// script for edit mode, settings dialog



</script>
{{else}}
<script>
//script for non edit mode
function markRead{{id_unique}}(guid) {
	AjaxPost("action=mark_read&guid="+guid,"dashboard.html");
	AjaxPost("action=update_custom_card&forcelayout=false&widget_id={{widget_id}}","dashboard.html");
}


</script>
{{end}}