faridv/hop

<div class="current">
    <div class="row row-eq-height">
        <div class="col-6">
            <div class="card status">
                <div class="row row-eq-height">
                    <div class="col-6">
                        <div class="weather-icon">
                            <i class="icon-{{weather.icon}}"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="align-self-center">
                            <h1 style="direction: ltr;">
                                {{weather.temperature.current}}
                                <small>℃</small>
                            </h1>
                            <h3>{{weather.description}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card details">
                <div class="row">
                    <div class="col-6">
                        <h4><i class="icon-windy"></i> باد</h4>
                        <h4 style="direction: ltr;">
                            {{weather.wind.speed}}
                            <small>km/h</small>
                        </h4>
                    </div>
                    <div class="col-6">
                        <h4><i class="icon-drop"></i> رطوبت</h4>
                        <h4 style="direction: ltr;">
                            {{weather.humidity}}
                            <small>%</small>
                        </h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <h4><i class="icon-street-view"></i> دید</h4>
                        <h4 style="direction: ltr;">
                            {{#if weather.visibility}}
                            {{weather.visibility}}
                            <small>m</small>
                            {{else}}نامشخص{{/if}}
                        </h4>
                    </div>
                    <div class="col-6">
                        <h4><i class="icon-thermometer"></i> فشار هوا</h4>
                        <h4 style="direction: ltr;">
                            {{weather.pressure}}
                            <small>hPa</small>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="forecast">
    <div class="row">
        {{#each forecast}}
        <div class="col">
            <div class="inner">
                <div class="details">
                <span class="icon">
                    <i class="icon-{{icon}}"></i>
                </span>
                </div>
                <div class="temp">
                    <div class="avg" style="direction: ltr;">
                        {{temperature.max}}
                    </div>
                    <!--<div class="high" style="direction: ltr;">-->
                        <!--{{temperature.max}}-->
                    <!--</div>-->
                    <!--<div class="low" style="direction: ltr;">-->
                        <!--{{temperature.min}}-->
                    <!--</div>-->
                </div>
                <h4 class="desc">{{description}}</h4>
                <time>{{fdate}}</time>
            </div>
        </div>
        {{/each}}
    </div>
</div>