  <turbo-stream action="replace" target="weather_popup"><template>
        <turbo-frame id="weather_popup">   
            <div class="container" style="display: flex;justify-content: end;">
                <div class="MainPoup" style="padding: 25px 20px 32px 30px; width: 426px;position: relative; margin-left: 761px;">
                <h4 style="font-size: 26px; font-weight: 700;  color: #c50f10;     line-height: normal;">Weather <br/>at Time of Incident</h4>
                <button type="button" id="model_close"> </button>

                    <div style="margin-top: 16px;">

                            <p style="display: flex; gap: 17px;        align-items: center;">                       
                            <a style="font-size: 44px; font-weight: 700;  color: #1e98d7;" data-turbo-method="get" data-turbo-stream="true" href="/update_pop_temp/metric/464">31 °</a>
                                <img src="/assets/03d.svg"  style="  width: 76px; height: 60px;">
                        </p>

                        <p style="font-size: 20px; color: #c7031b; margin-top: 8px; margin-bottom: 11px;">Clouds. Scattered clouds. </p>

                        <div style="display: grid; gap: 10px; grid-template-columns: 90px 144px auto; 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;">
                        28°
                        </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;">
                        79%
                        </p>

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


                        <div style="display: grid; gap: 10px; grid-template-columns: 90px 144px auto; margin-bottom: 0px;">
                        <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;">
                        31°
                        </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;">
                        1010.0 hPa
                        </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 style="display: flex; align-items: end; gap: 21px;">
                            <p style="font-size: 20px; font-weight: 700; gap: 5px;display: flex;align-items: baseline;">
                                
                                    <img src="/assets/normal_u1524.gif" alt="" style="width: 26px;height: 32px;">
                                    0.59 m                            
                            </p>
                            
                        </div>
                    </div>
                </div>
            </div>
</turbo-frame></template></turbo-stream>