{{#if showAttached}}
<div id="{{wrapperElementId}}" class="{{containerClasses}}">
{{/if}}

<div id="swr-container" {{#if hideDialog}}style="display:none"{{else}}style="bottom:{{windowPosition.bottom}}px; left:{{windowPosition.left}}px; position: {{containerPosition}};"{{/if}}>
	<div id="swr-wrapper">
		<div id="swr-calendar-box" {{#if hideCalendar}}style="display:none"{{/if}}>

			<!-- header -->
			<header id="calendar-header">
				<div class="swr-top-bar">
					<div id="swr-weather-move-handle">&nbsp;</div>

					<div>
						<button id="swr-weather-box-toggle" class="swr-toggle-btn {{#unless hideWeather}}on{{/unless}}">
							<i class="fas fa-cloud-sun" title="{{localize 'swr.labels.toggleWeatherBox'}}"></i>
						</button>
					</div>
				</div>
			</header>

			<!-- date side -->
			<div id="swr-date-box">
				<div id="swr-date-display">
					{{ weekday }}, {{ displayDate }}
				</div>

				<div id="swr-time-display">
					{{ formattedTime }}
				</div>
			</div>

			<!-- footer -->
			<!--
			{{#if isGM}}
			<footer class="">
			</footer>
			{{/if}}
			-->
		</div>

		<div id="swr-weather-box" class="{{#unless isGM}}swr-player-box{{/unless}}" {{#if hideWeather}}style="display:none"{{/if}}>
			<div id="swr-weather-container">
				<header>
					{{#unless attachedMode }}
						<div class="swr-top-bar">
							<div id="swr-calendar-move-handle" style="flex:1 1 80%">&nbsp;</div>

							<a style="margin: 0 4px 0 4px;">
								<i id="swr-close-button" class="fas fa-times"></i>
							</a>
						</div>
					{{/unless}}

					{{#if isGM}}
						<div id="swr-manual-bar" class="swr-optional-bar {{#if displayOptions.manualBar}}swr-display-bar{{/if}}">
							<div class="select-wrapper" style="flex:1">
								<input id="swr-manual-pause" type="checkbox" title="{{localize 'swr.labels.manualPauseHint'}}" {{#if manualPause}}checked{{/if}} />
								<label for="swr-manual-pause">{{localize 'swr.labels.manualPause'}}</label>
							</div>

							<div class="row-break"></div>

							<div class="select-wrapper" style="flex: 0 0 50%">
								<select id="swr-manual-weather-selection" {{#if selectedManualOption.valid}}{{else}}class="swr-invalid-manual-option"{{/if}} title="{{localize 'swr.options.manualWeather.select'}}">
									{{#each manualSelections }}
										<option title="{{text}}" {{#if (eq @root.selectedManualOption.value value)}}selected="selected"{{/if}} {{#if valid}}{{else}}class="swr-invalid-manual-option"{{/if}} value="{{value}}">{{text}}</option>
									{{/each}}
								</select>
							</div>
							<div class="select-wrapper" style="flex: 1 1 10%">
								<input id="swr-manual-temperature" title="{{localize 'swr.labels.manualWeatherTemperature'}}" maxlength="4" style="width: 45px;">
								°{{#if useCelsius }}C{{else}}F{{/if}}
							</div>
							<button id='swr-manual-submit' style="flex: 0 0 25px;" title="{{localize 'swr.labels.manualWeatherDisabled'}}" disabled="disabled">
								<i class="fas fa-redo"></i>
							</button>
							<div class="select-wrapper" style="flex: 1 0 10%"></div> 
						</div>

						<div class="row-break"></div>

						<div id="swr-season-bar" class="swr-optional-bar {{#if displayOptions.seasonBar}}swr-display-bar{{/if}}">
							<div style="padding-left: 7px;">
								<span id="swr-season-icon">
									<span class="fa {{ currentSeasonClass }}"></span>
								</span>
							</div>

							<div class="select-wrapper" style="flex:1">
								<select id="swr-season-selection" title="{{localize 'swr.options.season.select'}}">
									{{#each seasonSelections}}
										<option title="{{text}}" value="{{value}}">{{text}}</option>
									{{/each}}
								</select>
							</div>
						</div>
						<div class="row-break"></div>

						<div id="swr-biome-bar" class="swr-optional-bar {{#if displayOptions.biomeBar}}swr-display-bar{{/if}}">
							<div class="select-wrapper" style="flex:0 0 50%">
								<select id="swr-biome-selection" title="{{localize 'swr.options.biome.select'}}">
									{{#each biomeSelections}}
										<option title="{{text}}" value="{{value}}">{{text}}</option>
									{{/each}}
								</select>
							</div>
							<div class="row-break"></div>

							<div class="select-wrapper" style="flex:0 0 50%">
								<select id="swr-climate-selection" title="{{localize 'swr.options.climate.select'}}">
									{{#each climateSelections}}
										<option title="{{text}}" value="{{value}}">{{text}}</option>
									{{/each}}
								</select>
							</div>
							<div class="select-wrapper" style="flex: 0 0 50%">
								<select id="swr-humidity-selection" title="{{localize 'swr.options.humidity.select'}}">
									{{#each humiditySelections}}
										<option title="{{text}}" value="{{value}}">{{text}}</option>
									{{/each}}
								</select>
							</div>			
						</div>
						<div class="row-break"></div>
					{{/if}}

					<div id="swr-tool-bar">
						<button id="swr-date-box-toggle" class="swr-toggle-btn {{#unless hideCalendar}}on{{/unless}}" style="{{#if hideCalendarToggle}}display:none;{{/if}}">
							<i class="fas fa-calendar" title="{{localize 'swr.labels.toggleDateBox'}}"></i>
						</button> 

						{{#if isGM }}
							<button id="swr-season-bar-toggle" class="swr-toggle-btn {{#if displayOptions.seasonBar}}on{{/if}}">
								<i class="fas {{ currentSeasonClass }}" title="{{localize 'swr.labels.toggleSeasonBar'}}"></i>
							</button>
							<button id="swr-biome-bar-toggle" class="swr-toggle-btn {{#if displayOptions.biomeBar}}on{{/if}}">
								<i class="fas fa-thermometer-half" title="{{localize 'swr.labels.toggleBiomeBar'}}"></i>
							</button>
							<button id="swr-manual-bar-toggle" class="swr-toggle-btn {{#if displayOptions.manualBar }}on{{/if}}">
								<i class="fas fa-hand-point-down" title="{{localize 'swr.labels.toggleManualBar'}}"></i>
							</button>
							<button id="swr-fx-toggle" class="swr-toggle-btn {{#if fxActive }}on{{/if}}" style="{{#if hideFXToggle}}display:none; {{/if}}">
								<i class="fas fa-cloud-showers-heavy" title="{{localize 'swr.labels.toggleFX'}}"></i>
							</button>
						{{/if}}
					</div>
				</header>

				<!-- the box with the actual current weather -->
				<div class="swr-weather-content">
					{{#if isGM}}
						<div id="swr-current-weather-controls">
							<span id="swr-chat-repost" class="swr-current-weather-control" title="{{localize 'swr.labels.repostChat'}}">
								<i class="fas fa-comments"></i>
							</span>
							<span id="swr-weather-refresh" class="swr-current-weather-control" title="{{localize 'swr.labels.regenerateWeather'}}" style="{{#if manualPause}}display:none;{{/if}}">
								<i class="fas fa-redo"></i>
							</span>
						</div>
					{{/if}}

					<div class="swr-weather-description">
						<p id="swr-current-description">{{ currentTemperature }} - {{ currentDescription }}</p>
					</div>
					<div class="swr-weather-forecast">
						{{#if showForecast }}
							{{localize 'swr.labels.forecast'}}: &nbsp;
							{{#each forecasts}}
								<div data-tooltip="{{description}}" style="display:inline-block">      
									<i class="fas {{icon}}"></i>
            		</div>
							{{/each}}
						{{/if}}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{{#if showAttached}}
</div>
{{/if}}
