<turbo-stream action="replace" target="weather"><template>
    <turbo-frame id="weather">
        <div class="weather" style="margin-right: 0px; width: 100%;">
          <div class="head">
            <h2 style="text-align: left;">Weather Now</h2>
            <span class="divider">
             
            </span>
          </div>
          <div class="weatherNow-homePage">
            <p style="display: flex;align-items: center;gap: 9px;font-size: 30px;font-weight: 700; margin-bottom: 7px;"> 
              <span id="weatherTemp"><a class="update_weather" data-turbo-method="get" data-turbo-stream="true" href="/update_temp/imperial">86</a>° </span>
              <img src="/assets/09d.svg" alt="" width="46px" height="36px" style="width: 46px; height: 36px;">
            </p>
            <p style="font-size: 20px;">Rain. Light intensity shower rain</p>
            <div style="margin-top: 11px;">
                <div style="display: grid;grid-template-columns: 90px 134px auto; gap: 10px; margin-bottom: 2px;">
                  <p style="font-size: 20px;color: #7f7f7f;display: flex;align-items: center; ">
                    <img src="/assets/normal_u1564.svg" alt="" width="19px" height="24px" style="margin-right: 12px;">
                    82°
                  </p>

                   <p style="font-size: 20px;color: #7f7f7f;display: flex;align-items: center; ">
                    <img src="/assets/normal_u1566.svg" alt="" width="17px" height="24px" style="margin-right: 11px;">
                    76%
                  </p>

                    <p style="font-size: 20px;color: #7f7f7f;display: flex;align-items: center; ">
                    7-12 mph
                  </p>
                </div>

                <div style="display: grid;grid-template-columns: 90px 134px auto; gap: 10px;  margin-bottom: 14px;">
                  <p style="font-size: 20px;color: #7f7f7f;display: flex;align-items: center; ">
                    <img src="/assets/normal_u1565.svg" alt="" width="19px" height="24px" style="margin-right: 12px;">
                    86°
                  </p>

                   <p style="font-size: 20px;color: #7f7f7f;display: flex;align-items: center; ">
                    <img src="/assets/normal_u1567.svg" alt="" width="11px" height="24px" style="margin-right: 14px;">
                    29.8 inHG
                  </p>

                    <p style="font-size: 14px;color: #c7031b;display: flex;    flex-direction: column; gap: 3px;">
                    <span>
                      FROM <strong>NE </strong>
                    </span>
                     <img src="/assets/compass_NE.svg" alt="" width="24px" height="25px">
                  </p>
                </div>
            </div>
            <p style="font-size: 20px; font-weight: 700; gap: 5px;     display: flex;     align-items: baseline; margin-bottom: 17px;">
                  <img src="/assets/high_tide.gif" alt="" width="26px" height="32px">
                    -0.29 ft 
                <span style="color: #000000;     font-weight: 400; margin: 0 5px;">|</span> <button type="button" id="tidePopupActiver">Tide Details</button>
             </p>
          </div>
        </div>
</turbo-frame></template></turbo-stream>