{% assign icon = include.icon | default: 'cloud-rain' %}
<div class="card card-gradient card-gradient-{{ include.color | default: 'blue' }} card-gradient-end">
	<div class="card-body">
		<div class="row">
			<div class="col">
				<div class="row">
               <div class="col-auto">
                  <h3 class="card-title mb-2">{{ include.city | default: 'Warsaw' }}</h3>
               </div>
               <div class="col">
                  {% include "ui/icon.html" icon=icon %}
               </div>
            </div>
            <div class="text-secondary">
               {{ include.description | default: 'Cloudy morning' }}
            </div>
			</div>
			<div class="col-auto">
            <div class="display-5 lh-1 fw-lighter">{{ include.temperature | default: 20 }}&deg;</div>
			</div>
      </div>
	</div>
</div>