{{#Name=5 Day Forecast}}
{{#Description=Displays the weather forecast for 5 days, used HS long/lat}}
{{#Version=1.0}}
{{#Author=HomeSeer}}
{{#CanBeDeleted=False}}

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

{{#get settings}}
{{sections[index]="Settings"}}
{{loc_long=get_value 'save_loc_long' (get_setting_text 'gLongitude') 'Location Longitude'}}
{{loc_lat=get_value 'save_loc_lat' (get_setting_text 'gLatitude') 'Location Latitude'}}
{{sections[index]="Title"}}
{{title=get_value 'save_title' '' 'Name'}}
{{title_size=get_value 'save_title_size' '25' 'Size'}}
{{title_color=get_value 'save_title_color' '#000000' 'Color'}}
{{sections[index]="Current Icon Size"}}
{{current_icon_width=get_value 'save_current_icon_width' '50' 'Width'}}
{{current_icon_height=get_value 'save_current_icon_height' '50' 'Height'}}
{{sections[index]="Current Conditions"}}
{{current_text_size=get_value 'save_current_text_size' '20' 'Size'}}
{{current_text_color=get_value 'save_current_text_color' '#000000' 'Color'}}
{{sections[index]="Current Temp"}}
{{current_temp_size=get_value 'save_current_temp_size' '25' 'Size'}}
{{current_temp_color=get_value 'save_current_temp_color' '#000000' 'Color'}}
{{sections[index]="Current Humidity"}}
{{current_humidity_size=get_value 'save_current_humidity_size' '25' 'Size'}}
{{current_humidity_color=get_value 'save_current_humidity_color' '#000000' 'Color'}}
{{sections[index]="Day"}}
{{day_size=get_value 'save_day_size' '16' 'Size'}}
{{day_color=get_value 'save_day_color' '#000000' 'Color'}}
{{sections[index]="Day High Temp"}}
{{day_temp_size=get_value 'save_day_temp_size' '16' 'Size'}}
{{day_temp_color=get_value 'save_day_temp_color' '#FF8C00' 'Color'}}
{{sections[index]="Day Low Temp"}}
{{night_temp_size=get_value 'save_night_temp_size' '16' 'Size'}}
{{night_temp_color=get_value 'save_night_temp_color' '#33c7ff' 'Color'}}
{{sections[index]="Day Icon Size"}}
{{icon_width=get_value 'save_icon_width' '40' 'Width'}}
{{icon_height=get_value 'save_icon_height' '40' 'Height'}}



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

.title{{w.id}} {
    text-align: center;
    font-size: {{title_size}}px;
    color: {{title_color}};
    font-weight: bold;
}

.current_temp{{w.id}} {
	text-align: center;
	font-size: {{current_temp_size}}px;
    font-weight: bold;
	color: {{current_temp_color}};
}

.current_humidity{{w.id}} {
    text-align: right;
    font-size: {{current_humidity_size}}px;
    font-weight: bold;
    color: {{current_humidity_color}};
}

.current_text{{w.id}} {
    text-align: center;
    font-size: {{current_text_size}}px;
    color: {{current_text_color}};
    font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.temp{{w.id}} {
	text-align: center;
	font-size: {{day_temp_size}}px;
	color: {{day_temp_color}};
	font-weight: bold;
}

.templow{{w.id}} {
	text-align: center;
	font-size: {{night_temp_size}}px;
	color: {{night_temp_color}};
	font-weight: bold;
}

.day{{w.id}} {
	text-align: center;
	font-weight: bold;
	color: {{day_color}};
	font-size: {{day_size}}px;
}

.weather-row {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

.weather-col {
  flex: 1;
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


</style>

{{#temp scale: empty string or "True" =F else C}}
{{ch=get_setting_text 'gGlobalTempScaleF'}}
{{temp_unit=''}}
{{if ch=='' || ch=='True'}}
    {{temp_unit='&temperature_unit=fahrenheit'}}
{{end}}
{{weather_url='https://api.open-meteo.com/v1/forecast?latitude=' | string.append loc_lat | string.append '&longitude=' | string.append loc_long | string.append '&daily=weather_code,temperature_2m_max,temperature_2m_min&current=temperature_2m&current=is_day,temperature_2m,relative_humidity_2m,weather_code'}}
{{weather_url=weather_url | string.append temp_unit}}
{{if queries['fetch_weather_data']=='true'}}
	{{#we cache this request to limit the # of weather API requests}}
	{{#web_download_json_to_object url,useragent,cache_timeout(ms)}}
	{{obj=web_download_json_to_object weather_url "" 36000}}
{{end}}
{{if obj==null}}

    <div class="container{{w.id}} hs_spinner d-flex justify-content-center align-items-center align-content-center">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>


{{else}}
<div class="p-2 container{{w.id}}">		
        {{current_temp=obj.current.temperature_2m//1}}  {{#// always rounds value to an integer}}
        {{current_humidity=obj.current.relative_humidity_2m}}
        {{current_code=obj.current.weather_code}}
        {{current_text=''}}
        {{
            case current_code
                when 0
                    current_text="Sunny"
                when 1,2,3
                    current_text="Partly Cloudy"
                when 45,48
                    current_text="Fog"
                when 51,53,55
                    current_text="Drizzle"
                when 56,57
                    current_text="Freezing Drizzle"
                when 61,63,65
                    current_text="Rain"
                when 66,67
                    current_text="Freezing Rain"
                when 71,73,75
                    current_text="Snow"
                when 77
                    current_text="Sleet"
                when 80,81,82
                    current_text="Rain Showers"
                when 85,86
                    current_text="Snow Showers"
                when 95
                    current_text="Thunderstorms"
                when 96,99
                    current_text="Thunderstorms with Hail"
            end
        }}
        {{days=[]}}
        {{temph=[]}}
        {{templ=[]}}
        {{wc=[]}}
        {{index=0}}
        {{sunset=get_setting_text 'gSunset'}}
        {{dtsunset=date.parse sunset}}
        {{sunset_hour=date.to_string dtsunset "%H"}}
        {{current_hour=date.to_string date.now "%H"}}
        {{if current_hour > sunset_hour
            is_night=true
        else
            is_night=false
        end}}

        {{for tm in obj.daily.time}}            
            {{dt=date.parse tm}}
            {{days[index]=date.to_string dt "%a"}}
            {{wc[index]=obj.daily.weather_code[index]}}            
            {{temph[index]=obj.daily.temperature_2m_max[index]//1}}
            {{templ[index]=obj.daily.temperature_2m_min[index]//1}}
            {{index=index+1}}
        {{end}}

		{{if title != ''}}
		<div class="row no-gutters title{{w.id}}">
			<div class="col-12 justify-content-center align-content-center">{{title}}</div>
		</div>
		{{end}}



		<div class="row no-gutters current_icon{{w.id}}">
			<div class="col-md-2 current_temp{{w.id}} justify-content-left align-content-center">{{current_temp}}&deg;</div>
			<div class="col-md-7 current_text{{w.id}} justify-content-center align-content-center">
				<img src="http://weather.homeseer.com/weather/images/icons/{{current_code}}{{if is_night}}n{{else}}d{{end}}.png" width="{{current_icon_width}}" height="{{current_icon_width}}">
				{{current_text}}
			</div>
			<div class="col-md-3 current_humidity{{w.id}} justify-content-right align-content-center">{{current_humidity}}%</div>
		</div>
		
	
		<div class="weather-row">
			{{for i in 0..4}}
			<div class="weather-col">
				<div class="day{{w.id}}">{{days[i]}}</div>
				<div class="text-center">
					<img src="http://weather.homeseer.com/weather/images/icons/{{wc[i]}}{{if is_night}}n{{else}}d{{end}}.png" width="{{icon_width}}" height="{{icon_height}}">
				</div>
				<div class="temp{{w.id}}">{{temph[i]}}&deg;</div>
				<div class="templow{{w.id}}">{{templ[i]}}&deg;</div>
			</div>
			{{end}}                
		</div>
            
</div>

{{#if we are not in edit mode, don't bother including the edit mode content}}
{{if dbs.edit_mode}}
    {{# card settings dialog}}
    {{#this dialog has 2 tabs, one for formatting the card, the other for card content}}
<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>
				                   {{#Add custom controls here for the second tab}}
                                    {{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">
                                        <div class="col-md justify-content-center align-content-center">
                                            {{titles[index]}}               
                                        </div>
                                        <div class="col-md 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>
                                        {{if sn | string.contains 'color'}}
                                        <div class="md-form input-group col-md-2 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}}
                                        <div class="md-form input-group col-md-2 justify-content-center text-center">
                                    
                                        </div> 
                                        {{end}}										
                                    </div>
                                    {{index=index+1}}
                                    {{end}}                          
                                </p>
				            </div>
                        </div>
			        
			   
                        {{save_action='save_custom_card_edits'}}
						{{includefileraw includes/dashboard_dialogs_footer.html}} 
                    </div>			   
			                         
			    </div>	 
                </form>                                 
            </div>                 
        </div>
    </div>
</div>
    {{end}}
{{end}}

<script>

$(document).ready(function () {
	{{if obj==null}}		
		AjaxPost("action=update_custom_card&forcelayout=true&widget_id={{widget_id}}&fetch_weather_data=true","dashboard.html");
	{{end}}
});

</script>

{{if dbs.edit_mode}}

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

{{else}}
<script>
// non edit mode


setTimeout(updateData{{id_unique}}, 3600000);
function updateData{{id_unique}}() {
	AjaxPost("action=update_custom_card&forcelayout=false&widget_id={{widget_id}}&fetch_weather_data=true","dashboard.html");
}

</script>
{{end}}