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

{{dbs=dashboards_ref}}

{{widget_id=queries['widget_id']}}
{{if widget_id==null}}
	{{widget_id=var1}}
{{end}}

{{w=widget_by_id widget_id}}

{{current_values=[]}}
{{save_names=[]}}
{{titles=[]}}

{{# function to get a saved value and return the value or the default value}}
{{index=0}}
{{func get_value
    v=get_saved_value $0 widget_id
    if v==''
        v=$1  
    end
    current_values[index]=v
    save_names[index]=$0
    titles[index]=$2
    index=index+1
    ret v
end}}

{{#get 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'}}
{{title=get_value 'save_title' '' 'Title'}}
{{title_size=get_value 'save_title_size' '25' 'Title Size'}}
{{title_color=get_value 'save_title_color' 'black' 'Title Color'}}
{{current_icon_width=get_value 'save_current_icon_width' '60' 'Current Icon Width'}}
{{current_icon_height=get_value 'save_current_icon_height' '60' 'Current Icon Height'}}
{{current_text_size=get_value 'save_current_text_size' '20' 'Current Text Size'}}
{{current_text_color=get_value 'save_current_text_color' 'black' 'Current Text Color'}}
{{current_temp_size=get_value 'save_current_temp_size' '30' 'Curent Temp Size'}}
{{current_temp_color=get_value 'save_current_temp_color' 'black' 'Current Temp Color'}}
{{current_humidity_size=get_value 'save_current_humidity_size' '16' 'Current Humidity Size'}}
{{current_humidity_color=get_value 'save_current_humidity_color' 'black' 'Current Humidity Color'}}
{{day_size=get_value 'save_day_size' '16' 'Day Size'}}
{{day_color=get_value 'save_day_color' 'black' 'Day Color'}}
{{day_temp_size=get_value 'save_day_temp_size' '16' 'High Temp Size'}}
{{day_temp_color=get_value 'save_day_temp_color' 'darkorange' 'High Temp Color'}}
{{night_temp_size=get_value 'save_night_temp_size' '16' 'Low Temp Size'}}
{{night_temp_color=get_value 'save_night_temp_color' '#33c7ff' 'Low Temp Color'}}
{{icon_width=get_value 'save_icon_width' '40' 'Icon Width'}}
{{icon_height=get_value 'save_icon_height' '40' 'Icon Height'}}



<style>
.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;
}

.current_icon{{w.id}} {
    text-align: left;
}

.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}};
}

</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=42.81&longitude=-71.47&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}}
{{obj=web_download_json_to_object weather_url ""}}
{{if obj==null}}
Unable to download forecast data<br>

{{else}}
<div class="p-2">		
        {{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-4 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}}">
	            </div>
                <div class="col-4 current_temp{{w.id}} justify-content-center align-content-center">
                    {{current_temp}}
                </div>
                <div class="col-4 current_humidity{{w.id}} justify-content-center align-content-center">
                    {{current_humidity}}%
                </div>
            </div>
            <div class="row no-gutters current_icon{{w.id}} mt-n2">
                <div class="col-12 current_text{{w.id}}">
                    {{current_text}}
                </div>
            </div>
        
            <div class="row no-gutters">	
                {{for i in 0..4}}
                <div class="col day{{w.id}}">
                    {{days[i]}}
                </div>	
                {{end}}
            </div>
            <div class="row no-gutters">	
                {{for i in 0..4}}
                <div class="col temp{{w.id}}">
                    <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>	
                {{end}}
            </div>
            <div class="row no-gutters">	
                {{for i in 0..4}}
                <div class="col temp{{w.id}}">
                    {{temph[i]}}
                </div>	
                {{end}}
            </div>
            <div class="row no-gutters">	
                {{for i in 0..4}}
                <div class="col templow{{w.id}}">
                    {{templ[i]}}
                </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 class="modal fade 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}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
                          Format</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#panel{{w.id}}2" role="tab"><i class="fas fa-edit mr-1"></i>
                          Display</a>
                      </li>
                    </ul>
                    <div class="tab-content mt-n4">
                        <div class="tab-pane fade in show active" 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" id="panel{{w.id}}2" role="tabpanel">      
                            <div class="modal-body">                     
			                    <input type="hidden" id="edit_camera_card_widget_id_{{w.id}}" name="edit_camera_card_widget_id_{{w.id}}" value="{{w.id}}">
			                    <p>
				                   {{#Add custom controls here for the second tab}}
                                    {{index=0}}
                                    {{for sn in save_names}}
                                    <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="btn btn-default">Color</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>
			        
			   
                        <div class="modal-footer"> 
			                <button type="button" class="btn btn-cancel" data-dismiss="modal">Cancel</button>
			                <button type="submit" class="btn btn-success" data-dismiss="modal" action="save_custom_card_edits" wid="{{w.id}}">Save</button>                	                             
                        </div>
                    </div>			   
			                         
			    </div>	 
                </form>                                 
            </div>                 
        </div>
    </div>
    {{end}}
{{end}}