File size: 23,131 Bytes
549a2cc
 
5c8a315
e5a285a
5c8a315
b10dbaa
 
549a2cc
5c8a315
 
b10dbaa
5c8a315
 
 
 
 
 
 
 
 
 
 
 
927c3de
a1551a6
549a2cc
 
a1551a6
 
 
5c8a315
a1551a6
 
 
5c8a315
 
 
 
b7d0cb0
 
 
 
 
 
b10dbaa
5c8a315
01defef
b10dbaa
01defef
1df563c
b10dbaa
5c8a315
b10dbaa
a1551a6
5c8a315
a472331
01defef
5c8a315
2ade62d
5c8a315
e5a285a
5c8a315
b7d0cb0
a1551a6
 
 
2ade62d
 
d2eac8a
2ade62d
 
 
 
 
b7d0cb0
 
a1551a6
b7d0cb0
 
 
 
 
 
 
 
d2eac8a
5c8a315
951e7a1
eb8b030
 
b7d0cb0
951e7a1
 
 
24d64b3
951e7a1
 
 
 
 
 
 
 
 
 
 
 
5c8a315
 
a1551a6
 
 
 
 
 
 
 
 
5c8a315
 
99b0a9f
5c8a315
e5a285a
5c8a315
 
a1551a6
e5a285a
5c8a315
6a4ee5f
 
 
 
 
927c3de
6a4ee5f
 
 
 
 
 
 
 
 
 
366b82f
e5a285a
5c8a315
 
a1551a6
 
 
 
 
 
 
 
 
 
 
 
 
5c8a315
e5a285a
 
 
a1551a6
 
 
 
 
e5a285a
 
 
a1551a6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24d64b3
 
 
 
e5a285a
a1551a6
e5a285a
 
a1551a6
 
 
 
 
 
 
 
 
 
 
 
5c8a315
5fe0186
5c8a315
 
5fe0186
5c8a315
 
 
5fe0186
0963bdd
5fe0186
 
 
405e170
 
 
5fe0186
405e170
5fe0186
 
 
 
 
 
 
 
405e170
5fe0186
 
 
405e170
5fe0186
 
 
 
8aff50f
5fe0186
 
 
 
 
 
 
405e170
 
5fe0186
 
 
a1551a6
5fe0186
 
a1551a6
5fe0186
 
0963bdd
 
 
 
 
fb2dec7
b38a158
 
99b0a9f
b38a158
0b486c6
 
 
 
 
 
 
 
eb8b030
 
5c8a315
 
a6c3087
 
 
5c8a315
a1551a6
a6c3087
 
 
 
 
 
 
 
 
 
 
 
 
 
a1551a6
5c8a315
 
 
 
b673702
5c8a315
 
 
99b0a9f
5c8a315
 
 
 
 
 
 
 
 
8a8cff3
 
e5a285a
 
 
 
 
 
 
 
 
 
 
6dcd218
a1551a6
2ade62d
a472331
8a8cff3
 
5c8a315
8a8cff3
5f1dd3f
8a8cff3
e5a285a
 
 
 
 
 
 
 
 
 
 
 
a1551a6
 
927c3de
a1551a6
 
 
 
 
 
927c3de
b10dbaa
5c8a315
886bf76
b7d0cb0
4d03435
b7d0cb0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a1551a6
b7d0cb0
 
a1551a6
b7d0cb0
 
 
 
 
 
 
 
 
 
 
6d4d03f
2ade62d
4482a4e
5c8a315
e5a285a
 
 
 
 
ebc2ece
a1551a6
 
 
 
24d64b3
a1551a6
 
 
 
99b0a9f
f9eef39
 
aa140fd
f9eef39
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b673702
 
 
 
 
391f5e7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b673702
 
391f5e7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b673702
 
391f5e7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b10dbaa
e5a285a
 
 
 
 
 
6dcd218
 
 
 
 
a1551a6
e5a285a
a1551a6
 
 
e5a285a
5fe0186
b673702
 
5fe0186
 
 
 
 
 
 
b7d0cb0
5fe0186
b38a158
5fe0186
 
b673702
5fe0186
 
 
b7d0cb0
5fe0186
 
 
b38a158
5fe0186
b673702
549a2cc
b673702
5c8a315
01defef
49d14ca
3b1c44f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49d14ca
 
5c8a315
49d14ca
 
b10dbaa
 
5c8a315
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
import os
import time
from datetime import datetime
import uuid

import folium
import pandas as pd
import streamlit as st
from huggingface_hub import HfApi
from streamlit_folium import st_folium

from src.text_content import (
    COLOR_MAPPING,
    CREDITS_TEXT,
    HEADERS_MAPPING,
    ICON_MAPPING,
    INTRO_TEXT_AR,
    INTRO_TEXT_EN,
    INTRO_TEXT_FR,
    LOGO,
    REVIEW_TEXT,
    SLOGAN,
)
from src.utils import add_latlng_col, init_map, parse_gg_sheet, is_request_in_list, marker_request
from src.map_utils import get_legend_macro

TOKEN = os.environ.get("HF_TOKEN", None)
VERIFIED_REQUESTS_URL = (
    "https://docs.google.com/spreadsheets/d/1PXcAtI5L95hHSXAiRl3Y4v5O4coG39S86OTfBEcvLTE/edit#gid=0"
)
REQUESTS_URL = "https://docs.google.com/spreadsheets/d/1gYoBBiBo1L18IVakHkf3t1fOGvHWb23loadyFZUeHJs/edit#gid=966953708"
INTERVENTIONS_URL = (
    "https://docs.google.com/spreadsheets/d/1eXOTqunOWWP8FRdENPs4cU9ulISm4XZWYJJNR1-SrwY/edit#gid=2089222765"
)
api = HfApi(TOKEN)


# Initialize Streamlit Config
st.set_page_config(
    layout="wide",
    initial_sidebar_state="collapsed",
    page_icon="🤝",
    page_title="Nt3awnou نتعاونو",
)

# Initialize States
if "sleep_time" not in st.session_state:
    st.session_state.sleep_time = 2
if "auto_refresh" not in st.session_state:
    st.session_state.auto_refresh = False

auto_refresh = st.sidebar.checkbox("Auto Refresh?", st.session_state.auto_refresh)
if auto_refresh:
    number = st.sidebar.number_input("Refresh rate in seconds", value=st.session_state.sleep_time)
    st.session_state.sleep_time = number


# Streamlit functions
def display_interventions(interventions_df, selected_statuses):
    """Display NGO interventions on the map"""
    global fg
    for index, row in interventions_df.iterrows():
        village_status = row[interventions_df.columns[7]]
        is_future_intervention = (
            row[interventions_df.columns[5]] == "Intervention prévue dans le futur / Planned future intervention"
        )

        if pd.isna(village_status) and not is_future_intervention:
            village_status = "Partiellement satisfait / Partially Served"

        if village_status not in selected_statuses:
            continue

        if is_future_intervention:
            color_mk = "pink"
            status = "Planned ⌛"
        elif village_status != "Critique, Besoin d'aide en urgence / Critical, in urgent need of help":
            # past intervention  and village not in a critical condition
            color_mk = "green"
            status = "Done ✅"

        else:
            color_mk = "darkgreen"
            status = "Partial ⚠️"

        intervention_type = row[interventions_df.columns[6]]
        org = row[interventions_df.columns[1]]
        contact = row[interventions_df.columns[2]]
        city = row[interventions_df.columns[9]]
        date = row[interventions_df.columns[4]]
        population = row[interventions_df.columns[11]]
        details = row[interventions_df.columns[8]]
        road_state = row[interventions_df.columns[12]]
        # intervention_info = f"<b>Intervention Status:</b> {status}<br><b>Village Status:</b> {village_status}<br><b>Org:</b> {org}<br><b>Intervention:</b> {intervention_type}<br><b>Population:</b> {population}<br><b>📅 Date:</b> {date}"
        intervention_info = f"""
        <b>Date:</b> {date}<br>
        <b>City:</b> {city}<br>
        <b>Intervention Status:</b> {status}<br>
        <b>Village Status:</b> {village_status}<br>
        <b>Org:</b> {org}<br>
        <b>Intervention:</b> {intervention_type}<br>
        <b>Population:</b> {population}<br>
        <b>Road State:</b> {road_state}<br>
        <b>Details:</b> {details}<br>
        <b>Contact:</b> {contact}<br>
        """

        if row["latlng"] is None:
            continue

        fg.add_child(
            folium.Marker(
                location=row["latlng"],
                tooltip=city,
                popup=folium.Popup(intervention_info, max_width=300),
                icon=folium.Icon(color=color_mk),
            )
        )


def show_requests(filtered_df):
    """Display victim requests on the map"""
    global fg
    for index, row in filtered_df.iterrows():
        request_type = row["ما هي احتياجاتك؟ (أضفها إذا لم يتم ذكرها)"]
        displayed_request = marker_request(request_type)  # TODO: the marker should depend on selected_options
        long_lat = row["latlng"]
        maps_url = f"https://maps.google.com/?q={long_lat}"

        douar = row[filtered_df.columns[3]]
        person_in_place = row[filtered_df.columns[6]]
        douar_info = row[filtered_df.columns[9]]
        source = row[filtered_df.columns[10]]
        # we display all requests in popup text and use the first one for the icon/color
        display_text = f"""
        <b>Request Type:</b> {request_type}<br>
        <b>Id:</b> {row["id"]}<br>
        <b>Source:</b> {source}<br>
        <b>Person in place:</b> {person_in_place}<br>
        <b>Douar:</b> {douar}<br>
        <b>Douar Info:</b> {douar_info}<br>
        <a href="{maps_url}" target="_blank" rel="noopener noreferrer"><b>Google Maps</b></a>
        """

        icon_name = ICON_MAPPING.get(request_type, "list")
        if long_lat is None:
            continue

        fg.add_child(
            folium.Marker(
                location=long_lat,
                tooltip=row["  لأي  جماعة / قيادة / دوار تنتمون ؟"]
                if not pd.isna(row["  لأي  جماعة / قيادة / دوار تنتمون ؟"])
                else None,
                popup=folium.Popup(display_text, max_width=300),
                icon=folium.Icon(
                    color=COLOR_MAPPING.get(displayed_request, "beige"), icon=icon_name, prefix="glyphicon"
                ),
            )
        )


def show_verified_requests(filtered_verified_df):
    """Display verified victim requests on the map"""
    global fg
    verified_color_mapping = {
        "Low": "beige",
        "Medium": "orange",
        "High": "red",
    }
    for index, row in filtered_verified_df.iterrows():
        long_lat = row["latlng"]
        # we display all requests in popup text and use the first one for the icon/color
        display_text = ""
        for col, val in zip(filtered_verified_df.columns, row):
            if col == "Help Details":
                request_type = row["Help Details"]
                marker_request(request_type)  # TODO: the marker should depend on selected_options
                display_text += f"<b>Request Type:</b> {request_type}<br>"
            elif col == "Location Details":
                display_text += f"<b>Location:</b> {val}<br>"
            elif col == "Emergency Degree":
                display_text += f"<b>Emergency Degree:</b> {val}<br>"
            elif col == "Verification Date":
                display_text += f"<b>Verification Date:</b> {val}<br>"
            elif col == "id":
                display_text = f"<b>Id:</b> {val}<br>" + display_text
            elif col == "latlng":
                maps_url = f"https://maps.google.com/?q={val}"
                display_text += (
                    f'<a href="{maps_url}" target="_blank" rel="noopener noreferrer"><b>Google Maps</b></a><br>'
                )

        # mark as solved button
        id_in_sheet = row["id"]+2
        display_text += f"<a href='https://docs.google.com/forms/d/e/1FAIpQLSdyAcOAULumk4A1DsfrwUsGdZ-9G5xOUuD3vHdQOp3nGNAZXw/viewform?usp=pp_url&entry.1499427789={id_in_sheet}&entry.1666684596={datetime.now().strftime('%Y-%m-%d')}' target='_blank' rel='noopener noreferrer'><b>Mark as solved</b></a><br>"

        icon_name = ICON_MAPPING.get(request_type, "list")
        emergency = row.get("Emergency Degree", "Low")
        if long_lat is None:
            continue
        location = row["Location Details"]
        fg.add_child(
            folium.Marker(
                location=long_lat,
                tooltip=location if not pd.isna(location) else None,
                popup=folium.Popup(display_text, max_width=300),
                icon=folium.Icon(
                    color=verified_color_mapping.get(emergency, "beige"), icon=icon_name, prefix="glyphicon"
                ),
            )
        )


def display_google_sheet_tables(data_url):
    """Display the google sheet tables for requests and interventions"""
    st.markdown(
        f"""<iframe src="{data_url}" width="100%" height="600px"></iframe>""",
        unsafe_allow_html=True,
    )


def display_dataframe(df, drop_cols, data_url, search_id=True, status=False, for_help_requests=False, show_link=True):
    """Display the dataframe in a table"""
    col_1, col_2 = st.columns([1, 1])

    # has df's first row
    df_hash = hash(df.iloc[0].to_string())

    with col_1:
        query = st.text_input("🔍 Search for information / بحث عن المعلومات", key=f"query_{df_hash}")
    with col_2:
        if search_id:
            id_number = st.number_input(
                "🔍 Search for an id / بحث عن رقم",
                min_value=0,
                max_value=len(filtered_df),
                value=0,
                step=1,
                key=f"id_{df_hash}",
            )
        if status:
            selected_status = st.selectbox(
                "🗓️ Status / حالة", ["all / الكل", "Done / تم", "Planned / مخطط لها"], key=f"status_{df_hash}"
            )

    if query:
        # Filtering the dataframe based on the query
        mask = df.apply(lambda row: row.astype(str).str.contains(query.lower(), case=False).any(), axis=1)
        display_df = df[mask]
    else:
        display_df = df

    if search_id and id_number:
        display_df = display_df[display_df["id"] == id_number]

    display_df = display_df.drop(drop_cols, axis=1)

    if status:
        target = "Pouvez-vous nous préciser si vous êtes déjà intervenus ou si vous prévoyez de le faire | Tell us if you already made the intervention, or if you're planning to do it"
        if selected_status == "Done / تم":
            display_df = display_df[display_df[target] == "Intervention déjà passée / Past intevention"]

        elif selected_status == "Planned / مخطط لها":
            display_df = display_df[display_df[target] != "Intervention déjà passée / Past intevention"]

    st.dataframe(display_df, height=500)
    # Original link to the Google Sheet
    if show_link:
        st.markdown(
            f"To view the full Google Sheet for advanced filtering go to: {data_url} **لعرض الورقة كاملة، اذهب إلى**"
        )
    # if we want to check hidden contact information
    if for_help_requests:
        st.markdown(
            "We are hiding contact information to protect the privacy of the victims. If you are an NGO and want to contact the victims, please contact us at nt3awnoumorocco@gmail.com",
        )
        st.markdown(
            """
                    <div style="text-align: left;">
                    <a href="mailto:nt3awnoumorocco@gmail.com">nt3awnoumorocco@gmail.com</a> نحن نخفي معلومات الاتصال لحماية خصوصية الضحايا. إذا كنت جمعية وتريد الاتصال بالضحايا، يرجى الاتصال بنا على 
                    </div>
                    """,
            unsafe_allow_html=True,
        )


def id_review_submission():
    """Id review submission form"""
    # collapse the text
    with st.expander("🔍 Review of requests | مراجعة طلب مساعدة"):
        st.markdown(REVIEW_TEXT)

        id_to_review = st.number_input("Enter id / أدخل الرقم", min_value=0, max_value=len(df), value=0, step=1)
        reason_for_review = st.text_area("Explain why / أدخل سبب المراجعة")
        if st.button("Submit / أرسل"):
            if reason_for_review == "":
                st.error("Please enter a reason / الرجاء إدخال سبب")
            else:
                filename = f"review_id_{id_to_review}_{datetime.now().strftime('%Y-%m-%d_%H-%M-%S')}.txt"
                with open(filename, "w") as f:
                    f.write(f"id: {id_to_review}, explanation: {reason_for_review}\n")
                api.upload_file(
                    path_or_fileobj=filename,
                    path_in_repo=filename,
                    repo_id="nt3awnou/review_requests",
                    repo_type="dataset",
                )
                st.success("Submitted at https://huggingface.co/datasets/nt3awnou/review_requests/ تم الإرسال")


# Logo and Title
st.markdown(LOGO, unsafe_allow_html=True)
# st.title("Nt3awnou نتعاونو")
st.markdown(SLOGAN, unsafe_allow_html=True)

m = init_map()
fg = folium.FeatureGroup(name="Markers")

# Selection of requests
options = [
    "إغاثة",
    "مساعدة طبية",
    "مأوى",
    "طعام وماء",
    "مخاطر (تسرب الغاز، تلف في الخدمات العامة...)",
]
selected_options = []

col1, col2 = st.columns([1, 1])
with col1:
    show_unverified = st.checkbox(
        "Display unverified requests / عرض الطلبات غير المؤكدة / Afficher les demandes non vérifiées",
        value=False,
    )
with col2:
    show_interventions = st.checkbox(
        "Display Interventions | Afficher les interventions | عرض عمليات المساعدة",
        value=True,
    )

st.markdown("👉 **Choose request type | Choissisez le type de demande | اختر نوع الطلب**")
col1, col2, col3, col4, col5 = st.columns([2, 4, 2, 3, 2])
cols = [col1, col2, col3, col4, col5]

for i, option in enumerate(options):
    checked = cols[i].checkbox(HEADERS_MAPPING[option], value=True)
    if checked:
        selected_options.append(option)

# Load data and initialize map with plugins
df = parse_gg_sheet(REQUESTS_URL)
if show_unverified:
    df = add_latlng_col(df, process_column=15)
len_requests = len(df)
interventions_df = parse_gg_sheet(INTERVENTIONS_URL)
interventions_df = add_latlng_col(interventions_df, process_column="Automatic Extracted Coordinates")
len_interventions = len(interventions_df)
verified_df = parse_gg_sheet(VERIFIED_REQUESTS_URL)
verified_df = add_latlng_col(verified_df, process_column="Automatic Extracted Coordinates")
len_verified_requests = len(verified_df)

df["id"] = df.index  # Needed to display request id
verified_df["id"] = verified_df.index  # Needed to display request id
# keep rows with at least one request in selected_options
filtered_df = df[
    df["ما هي احتياجاتك؟ (أضفها إذا لم يتم ذكرها)"].apply(lambda x: is_request_in_list(x, selected_options, options))
]
filtered_verified_df = verified_df[
    verified_df["Help Details"].apply(lambda x: is_request_in_list(x, selected_options, options))
]


# Selection of interventions

st.markdown(
    "👉 **State of villages visited by NGOs| Etat de villages visités par les ONGs | وضعية القرى التي زارتها الجمعيات**",
    unsafe_allow_html=True,
)
col_1, col_2, col_3 = st.columns([1, 1, 1])
critical_villages = col_1.checkbox(
    "🚨 Critical, in urgent need of help / وضع حرج، في حاجة عاجلة للمساعدة",
    value=True,
)
partially_satisfied_villages = col_2.checkbox(
    "⚠️ Partially served / مساعدة جزئية، بحاجة للمزيد من التدخلات",
    value=True,
)
fully_satisfied_villages = col_3.checkbox(
    "✅ Fully served  / تمت المساعدة بشكل كامل",
    value=True,
)
selected_village_types = []
if critical_villages:
    selected_village_types.append("🚨 Critical, in urgent need of help / وضع حرج، في حاجة عاجلة للمساعدة")

if partially_satisfied_villages:
    selected_village_types.append("⚠️ Partially served / مساعدة جزئية، بحاجة للمزيد من التدخلات")

if fully_satisfied_villages:
    selected_village_types.append("✅ Fully served  / تمت المساعدة بشكل كامل")

status_mapping = {
    "🚨 Critical, in urgent need of help / وضع حرج، في حاجة عاجلة للمساعدة": "Critique, Besoin d'aide en urgence / Critical, in urgent need of help",
    "⚠️ Partially served / مساعدة جزئية، بحاجة للمزيد من التدخلات": "Partiellement satisfait / Partially Served",
    "✅ Fully served  / تمت المساعدة بشكل كامل": "Entièrement satisfait / Fully served",
}
selected_statuses = [status_mapping[status] for status in selected_village_types]

if show_interventions:
    display_interventions(interventions_df, selected_statuses)

# Show requests
if show_unverified:
    show_requests(filtered_df)

# Show verified requests
show_verified_requests(verified_df)

# Add legend
legend_macro = get_legend_macro(show_unverified)
# delete old legend
for child in m.get_root()._children:
    pass  # TODO: fix this
    # if child.startswith("macro_element"):
    #     m.get_root()._children.remove(child)
m.get_root().add_child(legend_macro)

st_folium(m, use_container_width=True, returned_objects=[], feature_group_to_add=fg, key="map")

# Embed code
with st.expander("💻 For Developers only, embed code for the map | للمطورين فقط، يمكنك نسخ كود الخريطة"):
    st.code(
        """
<iframe id="nt3awnou-map"
   src="https://nt3awnou-embed-rescue-map.hf.space/?embed=true" width="1200" height="720" 
   frameborder="0"
   width="850"
   height="450"
   title="Nt3awno Rescue Map">
</iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
<script>
   iFrameResize({}, "#nt3awnou-map");
</script>
        """,
        language="html",
    )


tab_ar, tab_en, tab_fr = st.tabs(["العربية", "English", "Français"])


with tab_en:
    st.markdown(INTRO_TEXT_EN, unsafe_allow_html=True)
    col1, col2 = st.columns([1, 1])
    with col1:
        st.markdown(
            f"""
                <div style="text-align: center;">
                <h3>Number of help requests</h3>
                <h2>{len_requests}</h2>
                </div>
                """,
            unsafe_allow_html=True,
        )
    with col2:
        st.markdown(
            f"""
                <div style="text-align: center;">
                <h3>Number of interventions</h3>
                <h2>{len_interventions}</h2>
                </div>
                """,
            unsafe_allow_html=True,
        )
with tab_ar:
    st.markdown(INTRO_TEXT_AR, unsafe_allow_html=True)
    col1, col2 = st.columns([1, 1])
    with col1:
        st.markdown(
            f"""
                <div style="text-align: center;">
                <h3>عدد طلبات المساعدة</h3>
                <h2>{len_requests}</h2>
                </div>
                """,
            unsafe_allow_html=True,
        )
    with col2:
        st.markdown(
            f"""
                <div style="text-align: center;">
                <h3>عدد التدخلات</h3>
                <h2>{len_interventions}</h2>
                </div>
                """,
            unsafe_allow_html=True,
        )

with tab_fr:
    st.markdown(INTRO_TEXT_FR, unsafe_allow_html=True)
    col1, col2 = st.columns([1, 1])
    with col1:
        st.markdown(
            f"""
                <div style="text-align: center;">
                <h3>Nombre de demandes d'aide</h3>
                <h2>{len_requests}</h2>
                </div>
                """,
            unsafe_allow_html=True,
        )
    with col2:
        st.markdown(
            f"""
                <div style="text-align: center;">
                <h3>Nombre d'interventions</h3>
                <h2>{len_interventions}</h2>
                </div>
                """,
            unsafe_allow_html=True,
        )

# Verified Requests table
st.divider()
st.subheader("📝 **Table of verified requests / جدول الطلبات المؤكدة**")
drop_cols = [
    "Phone Number",
    "id",
    "Status",
    "Intervenant ",
    "Intervention Date",
    "Any remarks",
    "VerificationStatus",
    "Automatic Extracted Coordinates",
]
display_dataframe(
    verified_df, drop_cols, VERIFIED_REQUESTS_URL, search_id=True, for_help_requests=True, show_link=False
)

# Requests table
st.divider()
st.subheader("📝 **Table of requests / جدول الطلبات**")
drop_cols = [
    "(عند الامكان) رقم هاتف شخص موجود في عين المكان",
    "الرجاء الضغط على الرابط التالي لمعرفة موقعك إذا كان متاحا",
    "GeoStamp",
    "GeoCode",
    "GeoAddress",
    "Status",
    "id",
]
display_dataframe(filtered_df, drop_cols, REQUESTS_URL, search_id=True, for_help_requests=True)

# Interventions table
st.divider()
st.subheader("📝 **Table of interventions / جدول التدخلات**")
display_dataframe(
    interventions_df,
    [],  # We show NGOs contact information
    INTERVENTIONS_URL,
    search_id=False,
    status=True,
    for_help_requests=False,
)

# Submit an id for review
st.divider()
id_review_submission()


# Donations can be made to the gouvernmental fund under the name
st.divider()
st.subheader("📝 **Donations / التبرعات / Dons**")
tab_ar, tab_en, tab_fr = st.tabs(["العربية", "English", "Français"])
with tab_en:
    st.markdown(
        """
        <div style="text-align: center;">
        <h4>The official bank account dedicated to tackle the consequences of the earthquake is:</h4>
        <b>Account number:</b>
        <h2>126</h2>
        <b>RIB:</b> 001-810-0078000201106203-18
        <br>
        <b>For the money transfers coming from outside Morocco</b>
        <br>
        <b>IBAN:</b> MA64001810007800020110620318
        <br>
        """,
        unsafe_allow_html=True,
    )
with tab_ar:
    st.markdown(
        """
        <div style="text-align: center;">
        <h4>الحساب البنكي الرسمي المخصص لمواجهة عواقب الزلزال</h4>
        <b>رقم الحساب</b>
        <h2>126</h2>
        <b>RIB:</b> 001-810-0078000201106203-18
        <br>
        <b>للتحويلات القادمة من خارج المغرب</b>
        <br>
        <b>IBAN:</b> MA64001810007800020110620318
        <br>
        </div>
        """,
        unsafe_allow_html=True,
    )
with tab_fr:
    st.markdown(
        """
        <div style="text-align: center;">
        <h4>Le compte bancaire officiel dédié à la lutte contre les conséquences du séisme est le suivant:</h4>
        <b>Numéro de compte:</b>
        <h2>126</h2>
        <b>RIB:</b> 001-810-0078000201106203-18
        <br>
        <b>Pour les transferts d'argent en provenance de l'étranger</b>
        <br>
        <b>IBAN:</b> MA64001810007800020110620318
        <br>
        """,
        unsafe_allow_html=True,
    )


# Credits
st.markdown(
    CREDITS_TEXT,
    unsafe_allow_html=True,
)
if auto_refresh:
    time.sleep(number)
    st.experimental_rerun()