PageSourceSearch

https://dadis-breed-datasheet-ws.web.app/

html dadis-breed-datasheet-ws.web.app collected 2026-10-03 12:20:38 UTC 81,831 bytes, 1,504 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7  <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
8  <title>FAO Breed Data Sheet</title>
9
10  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
11
12  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
13  <link rel="stylesheet"
14    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
15
16  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
17  <link rel="stylesheet" type="text/css"
18    href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
19
20  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
21
22  
22<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
22
23
24  <link rel="stylesheet" href="./assets/main.css">
25</head>
26
27<body class="bg-light">
28
29  <!--   <div id="faoHeader" class="d-flex align-items-center shadow-sm" style="display: none;">
30    <img src="./assets/fao_header.PNG" alt="FAO Logo" style="padding-left: 2rem; max-height: 50px;">
31  </div> -->
32
33  <h2 id="breedDataSheetTitle" class="fao-primary-title">Breed Data Sheet</h2>
34
35  <div id="breedSearchForm" class="container mt-4" style="display: none;">
36    <div class="row justify-content-center">
37
38      <div class="col-auto mb-3 mb-md-0 d-flex align-items-center">
39        <button id="callback" onclick="goCallBack()" title="Back" class="btn btn-primary rounded-circle shadow-sm"
40          style="width: 50px; height: 50px; display: none; align-items: center; justify-content: center;">
41          <i class="material-icons">arrow_back</i>
42        </button>
43      </div>
44
45      <div class="col-12 col-lg-8">
46        <div class="card shadow-sm border-0">
47          <div class="card-body p-4">
48            <div class="row g-4">
49              <div class="col-12 col-md-6">
50                <label for="countrySelect" id="countryLabel"
51                  class="form-label fw-bold text-secondary small text-uppercase">Country</label>
52                <select id="countrySelect" class="form-select form-select-lg" onchange="doBreedSearch();">
53                  <option value="" id="chooseCountryLabel" selected>Choose a country</option>
54                </select>
55              </div>
56
57              <div class="col-12 col-md-6">
58                <label for="specieSelect" id="speciesLabel"
59                  class="form-label fw-bold text-secondary small text-uppercase">Species</label>
60                <select id="specieSelect" class="form-select form-select-lg" onchange="doBreedSearch();">
61                  <option value="" id="chooseSpeciesLabel" selected>Choose a species</option>
62                </select>
63              </div>
64            </div>
65          </div>
66        </div>
67      </div>
68    </div>
69  </div>
70
71  <div id="spinner" class="text-center py-5">
72    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
73      <span class="visually-hidden">Loading...</span>
74    </div>
75  </div>
76
77  <div id="messagesContainer" class="container mt-4">
78    <div class="row justify-content-center">
79
80      <div class="col-auto mb-3 mb-md-0"></div>
81
82      <div class="col-12 col-lg-8">
83        <div id="searchBreedMessage" class="alert alert-info text-center border-0 shadow-sm" style="display: none;">
84          <i class="material-icons align-middle me-2">info</i> <span id="searchBreedMessageText">Please select a country
85            and/or a species to see a list of breeds</span>
86          <hr>
87          <span class="small text-primary fw-bold"><i class="material-icons align-middle"
88              style="font-size: 16px;">g_translate</i> <span id="automaticTranslationNotificationText">If next to the
89              field's description there is this icon, it means that the text has been automatically
90              translated</span></span>
91        </div>
92        <div id="missingBreeds" class="alert alert-warning text-center border-0 shadow-sm" style="display: none;">
93          <i class="material-icons align-middle me-2">info</i> <span id="missingBreedsText">No breeds found</span>
94        </div>
95        <div id="generalError" class="alert alert-danger text-center border-0 shadow-sm" style="display: none;">
96          <i class="material-icons align-middle me-2">warning</i> <span id="generalErrorText">Error</span>
97        </div>
98        <div id="breedError" class="alert alert-danger text-center border-0 shadow-sm" style="display: none;">
99          <i class="material-icons align-middle me-2">warning</i> <span id="breedErrorText">Error: Breed profile not
100            found</span>
101        </div>
102      </div>
103
104    </div>
105  </div>
106
107  <div id="breedSearchList" class="container mt-4" style="display: none;">
108    <div id="renderBreedsList" class="row justify-content-center"></div>
109  </div>
110
111  <div id="breedProfile" class="container mt-4" style="display: none;">
112    <div id="profileCard" class="card shadow-sm border-0 mb-4">
113      <div class="card-body p-4">
114        <div class="d-flex justify-content-between align-items-center pb-3 border-bottom mb-3">
115          <button id="hamburgherTooltip" data-bs-toggle="offcanvas" data-bs-target="#side-nav" title="Summary"
116            class="btn btn-light rounded-circle d-flex align-items-center justify-content-center shadow-sm"
117            style="width: 45px; height: 45px;">
118            <i class="material-icons text-primary">menu</i>
119          </button>
120
121          <h3 class="card-title text-primary fw-normal m-0 text-center flex-grow-1">
122            <span id="breed" class="fw-bold"></span> / <span id="country"></span> (<span id="speciesTranslated"></span>)
123            <span id="specie" style="display:none;"></span>
124          </h3>
125
126          <div class="d-flex gap-2">
127            <button id="urlLinkTooltip" onclick="getURL()" title="Opens datasheet in a new tab."
128              class="btn btn-outline-primary rounded-circle d-flex align-items-center justify-content-center"
129              style="width: 45px; height: 45px;">
130              <i class="material-icons">open_in_new</i>
131            </button>
132            <button id="expandCollapsBtn" onclick="expandOrCollapse()" title="Expand / Collapse all"
133              class="btn btn-outline-secondary rounded-circle d-flex align-items-center justify-content-center"
134              style="width: 45px; height: 45px;">
135              <i id="collapsibleIcon" class="material-icons">unfold_more</i>
136            </button>
137            <button id="searchReference" onclick="goBackToSearch()" title="Back to Search"
138              class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center shadow-sm"
139              style="width: 45px; height: 45px;">
140              <i class="material-icons text-white">close</i>
141            </button>
142          </div>
143        </div>
144
145        <div id="translationSpinner" class="text-center my-3" style="display:none;">
146          <div class="spinner-border text-primary spinner-border-sm" role="status"></div>
147          <span class="ms-2 text-primary small fw-bold">Translating...</span>
148        </div>
149
150        <div class="table-responsive">
151          <table class="table table-borderless table-sm mb-0">
152            <tbody>
153              <tr>
154                <td class="fw-bold text-secondary w-25"><label id="mostCommonName">Most common name</label></td>
155                <td id="General_Name_MostCommonName" class="text-dark fw-bold"></td>
156              </tr>
157              <tr>
158                <td class="fw-bold text-secondary"><label id="language">Language</label></td>
159                <td id="General_Name_Language"></td>
160              </tr>
161              <tr>
162                <td class="fw-bold text-secondary"><label id="transboundaryBreedName">Transboundary breed name</label>
163                </td>
164                <td id="General_Name_TransboundaryOrBrandName"></td>
165              </tr>
166              <tr id="transboundaryGeoClassification">
167                <td class="fw-bold text-secondary"><label id="geographicalClassification">Geographical
168                    classification</label></td>
169                <td id="Transboundary_Geo_Classification"></td>
170              </tr>
171              <tr>
172                <td class="fw-bold text-secondary"><label id="breedClassificationAdaptedness">Breed Classification
173                    (adaptedness)</label></td>
174                <td id="OriginAndDevelopment_BreedClassification"></td>
175              </tr>
176              <tr id="General_Risk">
177                <td class="fw-bold text-secondary"><label id="riskLevel">Risk level</label></td>
178                <td>
179                  <a class="p-0 text-decoration-none cursor-pointer d-inline-block" href="#" data-bs-toggle="modal"
180                    data-bs-target="#modalRiskHelp">
181                    <div id="General_Risk_Outer_Circle">
182                      <div id="General_Risk_Inner_Circle">
183                        <i id="General_Risk_Icon" class="material-icons text-white" style="font-size: 16px;"></i>
184                      </div>
185                    </div>
186                  </a>
187                </td>
188              </tr>
189              <!--               <tr id="General_Risk">
190                <td class="fw-bold text-secondary"><label id="riskLevel">Risk level</label></td>
191                <td>
192                  <a class="p-0 text-decoration-none cursor-pointer d-inline-block" href="#" data-bs-toggle="modal"
193                    data-bs-target="#modalRiskHelp">
194                    <div class="risk-outer-circle">
195                      <div id="General_Risk_Inner_Circle" class="risk-inner-circle"><i id="General_Risk_Icon"
196                          class="material-icons text-white" style="font-size: 16px;"></i></div>
197                    </div>
198                  </a>
199                </td>
200              </tr> -->
201              <tr>
202                <td class="fw-bold text-secondary"><label id="sdgLocalRiskStatus">SDG local risk status</label></td>
203                <td id="Local_Breed_Risk"></td>
204              </tr>
205              <tr id="riskDetail">
206                <td class="fw-bold text-secondary"><label id="detailedLocalRiskStatus">Detailed local risk
207                    status</label></td>
208                <td id="Local_Breed_Risk_Detail"></td>
209              </tr>
210              <tr id="transboundaryBreedRisk">
211                <td class="fw-bold text-secondary"><label id="transboundaryBreedRiskLevel">Transboundary Breed Risk
212                    Level</label></td>
213                <td id="Transboundary_Breed_Risk"></td>
214              </tr>
215              <tr id="transboundaryRiskDetail">
216                <td class="fw-bold text-secondary"><label id="detailedTransboundaryRiskStatus">Detailed transboundary
217                    risk
218                    status</label></td>
219                <td id="Transboundary_Breed_Risk_Detail"></td>
220              </tr>
221              <tr id="localCryoConservationStatus">
222                <td class="fw-bold text-secondary"><label id="localCryoConservationStatusLabel">Local Cryo Conservation
223                    Status</label></td>
224                <td id="Local_Cryo_Conservation_Status"></td>
225              </tr>
226              <tr id="transboundaryCryoConservationStatus">
227                <td class="fw-bold text-secondary"><label id="transboundaryCryoConservationStatusLabel">Transboundary
228                    Cryo Conservation Status</label></td>
229                <td id="Transboundary_Cryo_Conservation_Status"></td>
230              </tr>
231              <tr id="lastPopulationEstimates">
232                <td class="fw-bold text-secondary"><label id="lastPopulationEstimatesLabel">Last Population
233                    Estimates</label></td>
234                <td id="Last_Population_Estimates"></td>
235              </tr>
236            </tbody>
237          </table>
238          <table class="table table-borderless table-sm mt-3" id="General_Name_Description_Table">
239            <tr>
240              <td class="fw-bold text-secondary w-25"><label id="description">Description</label></td>
241              <td>
242                <div id="General-Name-Description" class="d-inline-block me-2">
243                  <a id="General-Name-Description-Tooltip" href="#" data-bs-toggle="modal" data-bs-target="#modal1"
244                    data-callerid="General-Name-Description" title="Report Translation Error" class="text-warning"><i
245                      class="material-icons align-middle" style="font-size:18px;">g_translate</i></a>
246                </div>
247                <content-text id="General_Name_Description"></content-text>
248              </td>
249            </tr>
250          </table>
251        </div>
252      </div>
253    </div>
254
255    <div id="imagesContainer" class="card border-0 shadow-sm mb-4 bg-white p-3" style="display: none;">
256      <div id="images" class="slick-carousel"></div>
257    </div>
258    <!--     <div class="card border-0 shadow-sm mb-4 bg-white p-3">
259      <div id="images" class="slick-carousel"></div>
260    </div> -->
261
262    <div class="accordion shadow-sm mb-5" id="breedAccordion">
263
264      <div class="accordion-item border-0 border-bottom" id="BreedLocalNames">
265        <h2 class="accordion-header">
266          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
267            data-bs-target="#collapseLocalNames">
268            <span id="localNamesSection">Local names</span>
269          </button>
270        </h2>
271        <div id="collapseLocalNames" class="accordion-collapse collapse">
272          <div class="accordion-body table-responsive">
273            <table class="table table-striped table-sm mb-0">
274              <thead class="table-light text-secondary">
275                <tr>
276                  <th><span id="otherNamesTh">Other name</span></th>
277                  <th><span id="languageTh">Language</span></th>
278                  <th><span id="descriptionTh">Description</span></th>
279                </tr>
280              </thead>
281              <tbody id="otherNameTable"></tbody>
282            </table>
283          </div>
284        </div>
285      </div>
286
287      <div class="accordion-item border-0 border-bottom" id="Uses">
288        <h2 class="accordion-header">
289          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
290            data-bs-target="#collapseUses">
291            <span id="usesSection">Uses</span>
292          </button>
293        </h2>
294        <div id="collapseUses" class="accordion-collapse collapse">
295          <div class="accordion-body">
296            <div class="row g-3 table-responsive">
297              <div class="col-12 col-md-4">
298                <table class="table table-sm table-striped mb-0">
299                  <thead class="table-light">
300                    <tr>
301                      <th><span id="usesProvisionLabel">Provision Uses</span></th>
302                    </tr>
303                  </thead>
304                  <tbody id="usesProvisionTable"></tbody>
305                </table>
306              </div>
307              <div class="col-12 col-md-4">
308                <table class="table table-sm table-striped mb-0">
309                  <thead class="table-light">
310                    <tr>
311                      <th><span id="usesRegulationAndMaintenanceLabel">Regulation/Maintenance</span></th>
312                    </tr>
313                  </thead>
314                  <tbody id="usesRegulationAndMaintenanceTable"></tbody>
315                </table>
316              </div>
317              <div class="col-12 col-md-4">
318                <table class="table table-sm table-striped mb-0">
319                  <thead class="table-light">
320                    <tr>
321                      <th><span id="usesCulturalLabel">Cultural Uses</span></th>
322                    </tr>
323                  </thead>
324                  <tbody id="usesCulturalTable"></tbody>
325                </table>
326              </div>
327            </div>
328            <table class="table table-sm table-borderless mt-3">
329              <tr>
330                <td class="fw-bold text-secondary w-25"><label id="descriptionOfSpecificUsesLabel">Description of
331                    specific uses</label></td>
332                <td><content-text id="General_DescriptionOfSpecificUses"></content-text></td>
333              </tr>
334              <tr>
335                <td class="fw-bold text-secondary"><label id="productionEnvironemntAndManagementSystemsLabel">Production
336                    environment/systems</label></td>
337                <td><content-text id="General_ProductionEnvironemntAndManagementSystems"></content-text></td>
338              </tr>
339              <tr>
340                <td class="fw-bold text-secondary"><label id="literatureRelatedLabel">Literature related</label></td>
341                <td><content-text id="General_LiteratureRelated"></content-text></td>
342              </tr>
343            </table>
344          </div>
345        </div>
346      </div>
347
348      <div class="accordion-item border-0 border-bottom" id="OriginAndDevelopment">
349        <h2 class="accordion-header">
350          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
351            data-bs-target="#collapseOrigin">
352            <span id="ogirinAndDevelopmentSection">Origin and development</span>
353          </button>
354        </h2>
355        <div id="collapseOrigin" class="accordion-collapse collapse">
356          <div class="accordion-body table-responsive">
357            <table class="table table-sm table-striped mb-0">
358              <tbody>
359                <tr>
360                  <td class="fw-bold text-secondary w-25"><label id="herdbookLabel">Herdbook</label></td>
361                  <td id="OriginAndDevelopment_Herdbook"></td>
362                </tr>
363                <tr>
364                  <td class="fw-bold text-secondary"><label id="herdbookEstabilishedLabel">Herdbook established</label>
365                  </td>
366                  <td id="OriginAndDevelopment_HerdbookEstablished"></td>
367                </tr>
368                <tr>
369                  <td class="fw-bold text-secondary"><label id="descriptionOfOriginLabel">Description of origin</label>
370                  </td>
371                  <td><content-text id="OriginAndDevelopment_DescriptionOfOrigin"></content-text></td>
372                </tr>
373                <tr>
374                  <td class="fw-bold text-secondary"><label id="yearOfOriginLabel">Year of origin</label></td>
375                  <td id="OriginAndDevelopment_YearOfOrigin"></td>
376                </tr>
377                <tr>
378                  <td class="fw-bold text-secondary"><label id="importLabel">Import</label></td>
379                  <td><content-text id="OriginAndDevelopment_Import"></content-text></td>
380                </tr>
381                <tr>
382                  <td class="fw-bold text-secondary"><label id="locationWithinCountryLabel">Location within
383                      country</label></td>
384                  <td><content-text id="OriginAndDevelopment_LocationWithinCountry"></content-text></td>
385                </tr>
386              </tbody>
387            </table>
388          </div>
389        </div>
390      </div>
391
392      <div class="accordion-item border-0 border-bottom" id="BreedAdditionalInformation">
393        <h2 class="accordion-header">
394          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
395            data-bs-target="#collapseAdditionalInfo">
396            <span id="additionalInformationSection">Additional Information</span>
397          </button>
398        </h2>
399        <div id="collapseAdditionalInfo" class="accordion-collapse collapse">
400          <div class="accordion-body table-responsive">
401            <table class="table table-sm table-striped mb-0">
402              <tr>
403                <td class="fw-bold text-secondary w-25"><label id="additionalBreedInformationLabel">Additional breed
404                    information</label></td>
405                <td><content-text id="AdditionalInformation_AditionalBreedInformation"></content-text></td>
406              </tr>
407              <tr>
408                <td class="fw-bold text-secondary"><label id="culturalValueLabel">Cultural value</label></td>
409                <td><content-text id="AdditionalInformation_EfabisCulturalValue"></content-text></td>
410              </tr>
411              <tr>
412                <td class="fw-bold text-secondary"><label id="culturalRoleLabel">Cultural role</label></td>
413                <td><content-text id="AdditionalInformation_EfabisCultRole"></content-text></td>
414              </tr>
415              <tr>
416                <td class="fw-bold text-secondary"><label id="commentsLabel">Comments</label></td>
417                <td><content-text id="AdditionalInformation_Comments"></content-text></td>
418              </tr>
419            </table>
420          </div>
421        </div>
422      </div>
423
424      <div class="accordion-item border-0 border-bottom" id="BreedQualitiesInformation">
425        <h2 class="accordion-header">
426          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
427            data-bs-target="#collapseQualities">
428            <span id="qualitiesInformationSection">Qualities information</span>
429          </button>
430        </h2>
431        <div id="collapseQualities" class="accordion-collapse collapse">
432          <div class="accordion-body table-responsive">
433            <table class="table table-sm table-striped mb-0">
434              <tr>
435                <td class="fw-bold text-secondary w-25"><label id="specialCharacteristicOfProductLabel">Special
436                    characteristic of product</label></td>
437                <td><content-text
438                    id="AdditionalInformation_DistinctiveTraits_SpecialCharacteristicOfProduct"></content-text></td>
439              </tr>
440              <tr>
441                <td class="fw-bold text-secondary"><label id="specificResistanceOrToleranceLabel">Specific
442                    resistance/tolerance</label></td>
443                <td><content-text
444                    id="AdditionalInformation_DistinctiveTraits_SpecificResistanceOrTolerance"></content-text></td>
445              </tr>
446              <tr>
447                <td class="fw-bold text-secondary"><label
448                    id="adaptabilityToSpecificEnvironmentLabel">Adaptability</label></td>
449                <td><content-text
450                    id="AdditionalInformation_DistinctiveTraits_AdaptabilityToSpecificEnvironment"></content-text></td>
451              </tr>
452              <tr>
453                <td class="fw-bold text-secondary"><label id="specificReproductiveCharacteristicLabel">Specific
454                    reproductive characteristic</label></td>
455                <td><content-text
456                    id="AdditionalInformation_DistinctiveTraits_SpecificReproductiveCharacteristic"></content-text></td>
457              </tr>
458              <tr>
459                <td class="fw-bold text-secondary"><label id="otherSpecialQualitiesLabel">Other special
460                    qualities</label></td>
461                <td><content-text id="AdditionalInformation_DistinctiveTraits_OtherSpecialQualities"></content-text>
462                </td>
463              </tr>
464              <tr>
465                <td class="fw-bold text-secondary"><label id="referenceForSpecialQualitiesLabel">Reference</label></td>
466                <td><content-text
467                    id="AdditionalInformation_DistinctiveTraits_ReferenceForSpecialQualities"></content-text></td>
468              </tr>
469              <tr>
470                <td class="fw-bold text-secondary"><label id="geneticFeaturesLabel">Genetic features</label></td>
471                <td><content-text id="AdditionalInformation_DistinctiveTraits_EfabisGeneticFeatures"></content-text>
472                </td>
473              </tr>
474              <tr>
475                <td class="fw-bold text-secondary"><label id="environmentRoleLabel">Environment role</label></td>
476                <td><content-text id="AdditionalInformation_DistinctiveTraits_EfabisEnvironmentalRole"></content-text>
477                </td>
478              </tr>
479              <tr>
480                <td class="fw-bold text-secondary"><label id="adaptabilityToMarginalLandLabel">Marginal land</label>
481                </td>
482                <td><content-text
483                    id="AdditionalInformation_DistinctiveTraits_EfabisAdaptabilityToMarginalLand"></content-text></td>
484              </tr>
485            </table>
486          </div>
487        </div>
488      </div>
489
490      <div class="accordion-item border-0 border-bottom" id="BreedMorphologyInformation">
491        <h2 class="accordion-header">
492          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
493            data-bs-target="#collapseMorphology">
494            <span id="morphologyInformationSection">Morphology information</span>
495          </button>
496        </h2>
497        <div id="collapseMorphology" class="accordion-collapse collapse">
498          <div class="accordion-body table-responsive">
499            <table class="table table-bordered table-sm text-center mb-3">
500              <thead class="table-light text-secondary">
501                <tr>
502                  <th></th>
503                  <th id="malesLabel">males</th>
504                  <th id="femalesLabel">females</th>
505                </tr>
506              </thead>
507              <tbody>
508                <tr>
509                  <td class="text-start fw-bold text-secondary"><label id="witherHeigthLabel">Wither height (avg,
510                      cm)</label></td>
511                  <td id="Morphology_Morphology_WitherHeightMales"></td>
512                  <td id="Morphology_Morphology_WitherHeightfemales"></td>
513                </tr>
514                <tr>
515                  <td class="text-start fw-bold text-secondary"><label id="weigthLabel">Weight (avg, kg)</label></td>
516                  <td id="Morphology_Morphology_WeightMales"></td>
517                  <td id="Morphology_Morphology_WeightFemales"></td>
518                </tr>
519              </tbody>
520            </table>
521            <table class="table table-sm table-borderless mb-0">
522              <tr>
523                <td class="fw-bold text-secondary w-25"><label id="otherSpecificVisibleTraitsLabel">Other specific
524                    visible traits</label></td>
525                <td><content-text id="Morphology_Morphology_OtherSpecificVisibleTraits"></content-text></td>
526              </tr>
527            </table>
528          </div>
529        </div>
530      </div>
531
532      <div class="accordion-item border-0 border-bottom" id="BreedColours">
533        <h2 class="accordion-header">
534          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
535            data-bs-target="#collapseColours">
536            <span id="coloursSection">Colours</span>
537          </button>
538        </h2>
539        <div id="collapseColours" class="accordion-collapse collapse">
540          <div class="accordion-body table-responsive">
541            <table class="table table-sm table-striped mb-0">
542              <tr>
543                <td class="fw-bold text-secondary w-25"><label id="mainColourLabel">Main Colour</label></td>
544                <td><content-text id="Characteristic_CharColours_EfabisMainColour"></content-text></td>
545              </tr>
546              <tr>
547                <td class="fw-bold text-secondary"><label id="skinColourLabelEfabis">Skin colour</label></td>
548                <td><content-text id="Characteristic_CharColours_EfabisSkinColour"></content-text></td>
549              </tr>
550              <tr>
551                <td class="fw-bold text-secondary"><label id="colourCommentLabel">Colour Comment</label></td>
552                <td><content-text id="Characteristic_CharColours_ColorComments"></content-text></td>
553              </tr>
554            </table>
555          </div>
556        </div>
557      </div>
558
559      <div class="accordion-item border-0 border-bottom hornsControl" id="BreedHornsInformation" style="display:none;">
560        <h2 class="accordion-header">
561          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
562            data-bs-target="#collapseHorns">
563            <span id="hornsInformationSection">Horns information</span>
564          </button>
565        </h2>
566        <div id="collapseHorns" class="accordion-collapse collapse">
567          <div class="accordion-body table-responsive">
568            <table class="table table-sm table-striped mb-0">
569              <tr>
570                <td class="fw-bold text-secondary w-25"><label id="hornsNumberMalesLabel">Number of horns (male)</label>
571                </td>
572                <td id="Characteristic_CharHorns_NumberOfHornsMales"></td>
573              </tr>
574              <tr>
575                <td class="fw-bold text-secondary"><label id="hornsNumberFemalesLabel">Number of horns (females)</label>
576                </td>
577                <td id="Characteristic_CharHorns_NumberOfHornsFemales"></td>
578              </tr>
579              <tr>
580                <td class="fw-bold text-secondary"><label id="hornShapeSizeCommentsLabel">Horn shape, size,
581                    comments</label></td>
582                <td><content-text id="Characteristic_CharHorns_HornShapeSizeAndComments"></content-text></td>
583              </tr>
584            </table>
585          </div>
586        </div>
587      </div>
588
589      <div class="accordion-item border-0 border-bottom" id="BreedPerformanceInformation">
590        <h2 class="accordion-header">
591          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
592            data-bs-target="#collapsePerformance">
593            <span id="performanceInformationSection">Performance information</span>
594          </button>
595        </h2>
596        <div id="collapsePerformance" class="accordion-collapse collapse">
597          <div class="accordion-body table-responsive">
598            <table class="table table-sm table-bordered text-center mb-3">
599              <thead class="table-light text-secondary">
600                <tr>
601                  <th></th>
602                  <th colspan="3" id="performanceMalesLabel">males</th>
603                  <th colspan="3" id="performanceFemalesLabel">females</th>
604                </tr>
605                <tr class="small">
606                  <th></th>
607                  <th id="minLabel" class="text-primary">min</th>
608                  <th id="avgLabel" class="text-dark">avg</th>
609                  <th id="maxLabel" class="text-danger">max</th>
610                  <th id="minLabel2" class="text-primary">min</th>
611                  <th id="avgLabel2" class="text-dark">avg</th>
612                  <th id="maxLabel2" class="text-danger">max</th>
613                </tr>
614              </thead>
615              <tbody>
616                <tr>
617                  <td class="text-start fw-bold text-secondary"><label id="parturitionIntervalLabel">Parturition
618                      interval (day)</label></td>
619                  <td></td>
620                  <td></td>
621                  <td></td>
622                  <td id="performance_PerformanceInfo_parturitionIntervalMIN" class="text-primary fw-bold"></td>
623                  <td id="performance_PerformanceInfo_parturitionIntervalAVG" class="text-dark fw-bold"></td>
624                  <td id="performance_PerformanceInfo_parturitionIntervalMAX" class="text-danger fw-bold"></td>
625                </tr>
626                <tr>
627                  <td class="text-start fw-bold text-secondary"><label id="firstParturitionLabel">Age at first
628                      parturition</label></td>
629                  <td></td>
630                  <td></td>
631                  <td></td>
632                  <td id="performance_PerformanceInfo_ageFirstParturitionMIN" class="text-primary fw-bold"></td>
633                  <td id="performance_PerformanceInfo_ageFirstParturitionAVG" class="text-dark fw-bold"></td>
634                  <td id="performance_PerformanceInfo_ageFirstParturitionMAX" class="text-danger fw-bold"></td>
635                </tr>
636                <tr>
637                  <td class="text-start fw-bold text-secondary"><label id="ageOfBreedingLabel">Age of breeding</label>
638                  </td>
639                  <td></td>
640                  <td id="performance_PerformanceInfo_ageBreedingMales" class="text-dark fw-bold"></td>
641                  <td></td>
642                  <td></td>
643                  <td id="performance_PerformanceInfo_ageBreedingFemales" class="text-dark fw-bold"></td>
644                  <td></td>
645                </tr>
646                <tr>
647                  <td class="text-start fw-bold text-secondary"><label id="birthWeightLabel">Birth weight</label></td>
648                  <td></td>
649                  <td id="performance_PerformanceInfo_birthWeightMales" class="text-dark fw-bold"></td>
650                  <td></td>
651                  <td></td>
652                  <td id="performance_PerformanceInfo_birthWeightFemales" class="text-dark fw-bold"></td>
653                  <td></td>
654                </tr>
655                <tr>
656                  <td class="text-start fw-bold text-secondary"><label id="ageOfMaturityLabel">Age of maturity</label>
657                  </td>
658                  <td></td>
659                  <td id="performance_PerformanceInfo_AgeMaturityMales" class="text-dark fw-bold"></td>
660                  <td></td>
661                  <td></td>
662                  <td id="performance_PerformanceInfo_AgeMaturityFemales" class="text-dark fw-bold"></td>
663                  <td></td>
664                </tr>
665              </tbody>
666            </table>
667            <table class="table table-sm table-striped mb-0">
668              <tr>
669                <td class="fw-bold text-secondary w-25"><label id="dailyGainLabel">Daily gain (avg, g)</label></td>
670                <td id="performance_PerformanceInfo_dailyGain"></td>
671              </tr>
672              <tr>
673                <td class="fw-bold text-secondary"><label id="lengthOfProductiveLifeLabel">Length of productive
674                    life</label></td>
675                <td id="performance_PerformanceInfo_lengthProductiveLife"></td>
676              </tr>
677              <tr>
678                <td class="fw-bold text-secondary"><label id="carcassWeightLabel">Carcass weight (kg)</label></td>
679                <td id="performance_PerformanceInfo_carcassWeight"></td>
680              </tr>
681              <tr>
682                <td class="fw-bold text-secondary"><label id="dressingPercentageLabel">Dressing percentage</label></td>
683                <td id="performance_PerformanceInfo_dressingPercentage"></td>
684              </tr>
685              <tr>
686                <td class="fw-bold text-secondary"><label id="managmentConditionsPerformanceWasMeasuredLabel">Management
687                    conditions measured</label></td>
688                <td><content-text
689                    id="performance_PerformanceInfo_managmentConditionsPerformanceMeasured"></content-text></td>
690              </tr>
691              <tr>
692                <td class="fw-bold text-secondary"><label id="commentsManagmentConditionsLabel">Comments
693                    management</label></td>
694                <td><content-text id="performance_PerformanceInfo_CommentsManagmentConditions"></content-text></td>
695              </tr>
696              <tr>
697                <td class="fw-bold text-secondary"><label id="additionalPerformanceParametersLabel">Additional
698                    parameters</label></td>
699                <td><content-text id="performance_PerformanceInfo_additionalPerformanceParameters"></content-text></td>
700              </tr>
701            </table>
702          </div>
703        </div>
704      </div>
705
706      <div class="accordion-item border-0 border-bottom eggsControl" id="EggsInformation" style="display:none;">
707        <h2 class="accordion-header">
708          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
709            data-bs-target="#collapseEggs">
710            <span id="eggsInformationSection">Eggs information</span>
711          </button>
712        </h2>
713        <div id="collapseEggs" class="accordion-collapse collapse">
714          <div class="accordion-body table-responsive">
715            <table class="table table-bordered table-sm text-center mb-3">
716              <thead class="table-light text-secondary">
717                <tr>
718                  <th></th>
719                  <th id="eggsMinLabel" class="text-primary">min</th>
720                  <th id="eggsAvgLabel" class="text-dark">avg</th>
721                  <th id="eggsMaxLabel" class="text-danger">max</th>
722                </tr>
723              </thead>
724              <tbody>
725                <tr>
726                  <td class="text-start fw-bold text-secondary"><label id="eggsPerYearLabel">Eggs per year</label></td>
727                  <td id="Performance_PerfEggs_eggsPerYearMIN" class="text-primary fw-bold"></td>
728                  <td id="Performance_PerfEggs_eggsPerYearAVG" class="text-dark fw-bold"></td>
729                  <td id="Performance_PerfEggs_eggsPerYearMAX" class="text-danger fw-bold"></td>
730                </tr>
731              </tbody>
732            </table>
733            <table class="table table-sm table-striped mb-0">
734              <tr>
735                <td class="fw-bold text-secondary w-25"><label id="eggWeigthLabel">Egg weight</label></td>
736                <td id="Performance_PerfEggs_eggWeight"></td>
737              </tr>
738            </table>
739          </div>
740        </div>
741      </div>
742
743      <div class="accordion-item border-0 border-bottom fibreControl" id="FibreInformation" style="display:none;">
744        <h2 class="accordion-header">
745          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
746            data-bs-target="#collapseFibre">
747            <span id="fibreInformationSection">Fibre information</span>
748          </button>
749        </h2>
750        <div id="collapseFibre" class="accordion-collapse collapse">
751          <div class="accordion-body table-responsive">
752            <table class="table table-bordered table-sm text-center mb-3">
753              <thead class="table-light text-secondary">
754                <tr>
755                  <th></th>
756                  <th id="fibreMinLabel" class="text-primary">min</th>
757                  <th id="fibreAvgLabel" class="text-dark">avg</th>
758                  <th id="fibreMaxLabel" class="text-danger">max</th>
759                </tr>
760              </thead>
761              <tbody>
762                <tr>
763                  <td class="text-start fw-bold text-secondary"><label id="fleeceWeightLabel">Fleece Weight</label></td>
764                  <td id="Performance_Fibre_fleeceWeightMIN" class="text-primary fw-bold"></td>
765                  <td id="Performance_Fibre_fleeceWeightAVG" class="text-dark fw-bold"></td>
766                  <td id="Performance_Fibre_fleeceWeightMAX" class="text-danger fw-bold"></td>
767                </tr>
768              </tbody>
769            </table>
770            <table class="table table-sm table-striped mb-0">
771              <tr>
772                <td class="fw-bold text-secondary w-25"><label id="woolOrHairLabel">
772Wool Or Hair</label></td>
773                <td><content-text id="Performance_Fibre_woolOrHair"></content-text></td>
774              </tr>
775              <tr>
776                <td class="fw-bold text-secondary"><label id="woolTypeLabel">Wool Type</label></td>
777                <td><content-text id="Performance_Fibre_woolType"></content-text></td>
778              </tr>
779              <tr>
780                <td class="fw-bold text-secondary"><label id="fibreDiamLabel">Fibre Diam</label></td>
781                <td id="Performance_Fibre_fibreDiam"></td>
782              </tr>
783            </table>
784          </div>
785        </div>
786      </div>
787
788      <div class="accordion-item border-0 border-bottom birdControl" id="SpecificCharacteristic" style="display:none;">
789        <h2 class="accordion-header">
790          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
791            data-bs-target="#collapseBird">
792            <span id="specificCharacteristicSection">Specific characteristic</span>
793          </button>
794        </h2>
795        <div id="collapseBird" class="accordion-collapse collapse">
796          <div class="accordion-body table-responsive">
797            <table class="table table-sm table-striped mb-0">
798              <tr>
799                <td class="fw-bold text-secondary w-25"><label id="patternWithinFeatherLabel">Pattern within
800                    feather</label></td>
801                <td class="w-25"><content-text id="characteristic_CharBirdSpecific_PatternWithinFeather"></content-text>
802                </td>
803                <td class="fw-bold text-secondary w-25"><label id="plumageColourLabel">Plumage colour</label></td>
804                <td class="w-25"><content-text id="characteristic_CharBirdSpecific_PlumageColour"></content-text></td>
805              </tr>
806              <tr>
807                <td class="fw-bold text-secondary"><label id="skinColourLabel">Skin colour</label></td>
808                <td><content-text id="characteristic_CharBirdSpecific_SkinColour"></content-text></td>
809                <td class="fw-bold text-secondary"><label id="shankFootColourLabel">Shank and foot colour</label></td>
810                <td><content-text id="characteristic_CharBirdSpecific_ShankAndFootColour"></content-text></td>
811              </tr>
812              <tr>
813                <td class="fw-bold text-secondary"><label id="combTypeLabel">Comb type</label></td>
814                <td id="characteristic_CharBirdSpecific_CombType"></td>
815                <td class="fw-bold text-secondary"><label id="eggShellColourLabel">Egg shell colour</label></td>
816                <td><content-text id="characteristic_CharBirdSpecific_EggShellColour"></content-text></td>
817              </tr>
818              <tr>
819                <td class="fw-bold text-secondary"><label id="avianClassificationLabel">Avian classification</label>
820                </td>
821                <td><content-text id="characteristic_CharBirdSpecific_AvianClassification"></content-text></td>
822                <td></td>
823                <td></td>
824              </tr>
825            </table>
826          </div>
827        </div>
828      </div>
829
830      <div class="accordion-item border-0 border-bottom milkControl" id="BreedMilkInformation" style="display:none;">
831        <h2 class="accordion-header">
832          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
833            data-bs-target="#collapseMilk">
834            <span id="milkInformationSection">Milk information</span>
835          </button>
836        </h2>
837        <div id="collapseMilk" class="accordion-collapse collapse">
838          <div class="accordion-body table-responsive">
839            <table class="table table-bordered table-sm text-center mb-0">
840              <thead class="table-light text-secondary">
841                <tr>
842                  <th></th>
843                  <th id="milkMinLabel" class="text-primary">min</th>
844                  <th id="milkAvgLabel" class="text-dark">avg</th>
845                  <th id="milkMaxLabel" class="text-danger">max</th>
846                </tr>
847              </thead>
848              <tbody>
849                <tr>
850                  <td class="text-start fw-bold text-secondary"><label id="milkPerYearLabel">Milk per year</label></td>
851                  <td id="Performance_PerfMilk_milkPerYearMIN" class="text-primary fw-bold"></td>
852                  <td id="Performance_PerfMilk_milkPerYearAVG" class="text-dark fw-bold"></td>
853                  <td id="Performance_PerfMilk_milkPerYearMAX" class="text-danger fw-bold"></td>
854                </tr>
855                <tr>
856                  <td class="text-start fw-bold text-secondary"><label id="lactationLengthLabel">Lactation
857                      length</label></td>
858                  <td id="Performance_PerfMilk_lactationLengthMIN" class="text-primary fw-bold"></td>
859                  <td id="Performance_PerfMilk_lactationLengthAVG" 
859class="text-dark fw-bold"></td>
860                  <td id="Performance_PerfMilk_lactationLengthMAX" class="text-danger fw-bold"></td>
861                </tr>
862                <tr>
863                  <td class="text-start fw-bold text-secondary"><label id="milkYieldPerLactationLabel">Milk per
864                      lactation</label></td>
865                  <td id="Performance_PerfMilk_milkPerLactationMIN" class="text-primary fw-bold"></td>
866                  <td id="Performance_PerfMilk_milkPerLactationAVG" class="text-dark fw-bold"></td>
867                  <td id="Performance_PerfMilk_milkPerLactationMAX" class="text-danger fw-bold"></td>
868                </tr>
869                <tr>
870                  <td class="text-start fw-bold text-secondary"><label id="milkFatLabel">Milk fat</label></td>
871                  <td id="Performance_PerfMilk_milkFatMIN" class="text-primary fw-bold"></td>
872                  <td id="Performance_PerfMilk_milkFatAVG" class="text-dark fw-bold"></td>
873                  <td id="Performance_PerfMilk_milkFatMAX" class="text-danger fw-bold"></td>
874                </tr>
875                <tr>
876                  <td class="text-start fw-bold text-secondary"><label id="milkProteinLabel">Milk protein</label></td>
877                  <td id="Performance_PerfMilk_EfabisMilkProteinMIN" class="text-primary fw-bold"></td>
878                  <td id="Performance_PerfMilk_EfabisMilkProteinAVG" class="text-dark fw-bold"></td>
879                  <td id="Performance_PerfMilk_EfabisMilkProteinMAX" class="text-danger fw-bold"></td>
880                </tr>
881                <tr>
882                  <td class="text-start fw-bold text-secondary"><label id="milkPerDayLabel">Milk per day</label></td>
883                  <td></td>
884                  <td id="Performance_PerfMilk_milkPerDay" class="text-dark fw-bold"></td>
885                  <td></td>
886                </tr>
887                <tr>
888                  <td class="text-start fw-bold text-secondary"><label id="numberOfLactationsLabel">Number of
889                      lactations</label></td>
890                  <td></td>
891                  <td id="Performance_PerfMilk_numberOfLactations" class="text-dark fw-bold"></td>
892                  <td></td>
893                </tr>
894              </tbody>
895            </table>
896          </div>
897        </div>
898      </div>
899
900      <div class="accordion-item border-0 border-bottom prolificacyControl" id="Prolificacy" style="display:none;">
901        <h2 class="accordion-header">
902          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
903            data-bs-target="#collapseProlificacy">
904            <span id="prolificacySection">Prolificacy</span>
905          </button>
906        </h2>
907        <div id="collapseProlificacy" class="accordion-collapse collapse">
908          <div class="accordion-body table-responsive">
909            <table class="table table-bordered table-sm text-center mb-0">
910              <thead class="table-light text-secondary">
911                <tr>
912                  <th></th>
913                  <th id="prolificacyMinLabel" class="text-primary">min</th>
914                  <th id="prolificacyAvgLabel" class="text-dark">avg</th>
915                  <th id="prolificacyMaxLabel" class="text-danger">max</th>
916                </tr>
917              </thead>
918              <tbody>
919                <tr>
920                  <td class="text-start fw-bold text-secondary"><label id="litterLabel">Litter</label></td>
921                  <td id="Performance_Prolificacy_litterSizeMIN" class="text-primary fw-bold"></td>
922                  <td id="Performance_Prolificacy_litterSizeAVG" class="text-dark fw-bold"></td>
923                  <td id="Performance_Prolificacy_litterSizeMAX" class="text-danger fw-bold"></td>
924                </tr>
925              </tbody>
926            </table>
927          </div>
928        </div>
929      </div>
930
931      <div class="accordion-item border-0 border-bottom" id="ManagementConditions">
932        <h2 class="accordion-header">
933          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
934            data-bs-target="#collapseManagement">
935            <span id="managementConditionsSection">Management conditions</span>
936          </button>
937        </h2>
938        <div id="collapseManagement" class="accordion-collapse collapse">
939          <div class="accordion-body table-responsive">
940            <table class="table table-sm table-striped mb-0">
941              <tr>
942                <td class="fw-bold text-secondary w-25"><label id="managementSystemLabel">Management system</label></td>
943                <td id="Performance_ManagementConditions_managementSystem"></td>
944              </tr>
945              <tr>
946                <td class="fw-bold text-secondary"><label id="feedingOfAdultsLabel">Feeding of adults</label></td>
947                <td id="Performance_ManagementConditions_feedingOfAdults"></td>
948              </tr>
949              <tr>
950                <td class="fw-bold text-secondary"><label id="mobilityLabel">Mobility</label></td>
951                <td id="Performance_ManagementConditions_mobility"></td>
952              </tr>
953            </table>
954          </div>
955        </div>
956      </div>
957
958      <div class="accordion-item border-0 border-bottom" id="PopulationData">
959        <h2 class="accordion-header">
960          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
961            data-bs-target="#collapsePopulation">
962            <span id="populationDataSection">Population data</span>
963          </button>
964        </h2>
965        <div id="collapsePopulation" class="accordion-collapse collapse">
966          <div class="accordion-body">
967
968            <div class="d-flex justify-content-end mb-3">
969              <div class="export-container d-flex align-items-center bg-light p-2 border rounded shadow-sm">
970                <span class="me-3 fw-bold text-secondary small text-uppercase">Export:</span>
971                <div class="btn-group export-toggle" role="group">
972                  <input type="radio" class="btn-check" name="exportFormatPop" id="formatCsvPop" value="csv" checked>
973                  <label class="btn btn-outline-primary btn-sm d-flex align-items-center" for="formatCsvPop"><i
974                      class="material-icons fs-6 me-1">description</i> CSV</label>
975                  <input type="radio" class="btn-check" name="exportFormatPop" id="formatExcelPop" value="excel">
976                  <label class="btn btn-outline-primary btn-sm d-flex align-items-center" for="formatExcelPop"><i
977                      class="material-icons fs-6 me-1">table_chart</i> Excel</label>
978                </div>
979                <button class="btn btn-primary btn-sm ms-2 d-flex align-items-center"
980                  onclick="handleSectionExport(['#populationDataTable'], ['Population'], 'Population_Data', 'exportFormatPop')">
981                  <i class="material-icons me-1">download</i> <span class="fw-bold">Download</span>
982                </button>
983              </div>
984            </div>
985
986            <div class="table-responsive table-responsive-custom">
987              <table id="populationDataTable"
988                class="table table-sm table-striped table-bordered text-center align-middle text-nowrap mb-0">
989                <thead class="table-light text-secondary small">
990                  <tr>
991                    <th id="populationYearLabel">Year</th>
992                    <th id="populationLastUpdateLabel">Last update</th>
993                    <th><label id="populationLabel" class="d-block">Population</label> <span class="text-primary"
994                        id="populationMinLabel">Min</span> / <span class="text-danger"
995                        id="populationMaxLabel">Max</span></th>
996                    <th id="populationTrendLabel">Trend</th>
997                    <th id="populationBasedOnLabel">Based on</th>
998                    <th><label id="populationBreedingLabel" class="d-block">Breeding</label> <span class="text-primary"
999                        id="populationMalesLabel">Males</span> / <span class="text-danger"
1000                        id="populationFemalesLabel">Females</span></th>
1001                    <th id="populationFemalesRegisteredInHerdbooksLabel">Females in herdbooks</th>
1002                    <th id="populationFemalesBredPureLabel">Females bred pure</th>
1003                    <th id="populationHerdsLabel">Herds</th>
1004                    <th id="populationHerdSizeLabel">Herd size (avg)</th>
1005                    <th id="populationAILabel">AI used</th>
1006                    <th id="populationMaleInAILabel">Males in AI</th>
1007                    <th id="populationInSituConservationProgrammesLabel">In situ conservation</th>
1008                    <th id="populationReliabilityLabel">Reliability</th>
1009                  </tr>
1010                </thead>
1011                <tbody id="populationTable"></tbody>
1012              </table>
1013            </div>
1014          </div>
1015        </div>
1016      </div>
1017
1018      <div class="accordion-item border-0 border-bottom" id="EffectivePopulation">
1019        <h2 class="accordion-header">
1020          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
1021            data-bs-target="#collapseEffective">
1022            <span id="effectivePopulationSection">Effective Population Size</span>
1023          </button>
1024        </h2>
1025        <div id="collapseEffective" class="accordion-collapse collapse">
1026          <div class="accordion-body">
1027
1028            <div class="d-flex justify-content-end mb-3">
1029              <div class="export-container d-flex align-items-center bg-light p-2 border rounded shadow-sm">
1030                <span class="me-3 fw-bold text-secondary small text-uppercase">Export:</span>
1031                <div class="btn-group export-toggle" role="group">
1032                  <input type="radio" class="btn-check" name="exportFormatEff" id="formatCsvEff" value="csv" checked>
1033                  <label class="btn btn-outline-primary btn-sm d-flex align-items-center" for="formatCsvEff"><i
1034                      class="material-icons fs-6 me-1">description</i> CSV</label>
1035                  <input type="radio" class="btn-check" name="exportFormatEff" id="formatExcelEff" value="excel">
1036                  <label class="btn btn-outline-primary btn-sm d-flex align-items-center" for="formatExcelEff"><i
1037                      class="material-icons fs-6 me-1">table_chart</i> Excel</label>
1038                </div>
1039                <button class="btn btn-primary btn-sm ms-2 d-flex align-items-center"
1040                  onclick="handleSectionExport(['#demoTable', '#genoTable', '#pediTable'], ['Demographic', 'Genomic', 'Pedigree'], 'Effective_Population_Size', 'exportFormatEff')">
1041                  <i class="material-icons me-1">download</i> <span class="fw-bold">Download</span>
1042                </button>
1043              </div>
1044            </div>
1045
1046            <div class="table-responsive mb-4">
1047              <table id="demoTable" class="table table-sm table-bordered text-center align-middle mb-0">
1048                <thead class="table-light">
1049                  <tr>
1050                    <th colspan="5" id="demographicHeader" class="bg-primary text-white text-uppercase py-2">DEMOGRAPHIC
1051                    </th>
1052                  </tr>
1053                  <tr class="text-secondary small">
1054                    <th class="effectivePopYearLabel">Year</th>
1055                    <th class="effectivePopEstimateLabel">Estimate</th>
1056                    <th class="effectivePopMethodLabel">Method</th>
1057                    <th class="effectivePopReferenceLabel">Reference</th>
1058                    <th class="effectivePopLastUpdateLabel">Last Update</th>
1059                  </tr>
1060                </thead>
1061                <tbody id="demographicTableBody"></tbody>
1062              </table>
1063            </div>
1064            <div class="table-responsive mb-4">
1065              <table id="genoTable" class="table table-sm table-bordered text-center align-middle mb-0">
1066                <thead class="table-light">
1067                  <tr>
1068                    <th colspan="5" id="genomicHeader" class="bg-primary text-white text-uppercase py-2">GENOMIC</th>
1069                  </tr>
1070                  <tr class="text-secondary small">
1071                    <th class="effectivePopYearLabel">Year</th>
1072                    <th class="effectivePopEstimateLabel">Estimate</th>
1073                    <th class="effectivePopMethodLabel">Method</th>
1074                    <th class="effectivePopReferenceLabel">Reference</th>
1075                    <th class="effectivePopLastUpdateLabel">Last Update</th>
1076                  </tr>
1077                </thead>
1078                <tbody id="genomicTableBody"></tbody>
1079              </table>
1080            </div>
1081            <div class="table-responsive">
1082              <table id="pediTable" class="table table-sm table-bordered text-center align-middle mb-0">
1083                <thead class="table-light">
1084                  <tr>
1085                    <th colspan="5" id="pedigreeHeader" class="bg-primary text-white text-uppercase py-2">PEDIGREE</th>
1086                  </tr>
1087                  <tr class="text-secondary small">
1088                    <th class="effectivePopYearLabel">Year</th>
1089                    <th class="effectivePopEstimateLabel">Estimate</th>
1090                    <th class="effectivePopMethodLabel">Method</th>
1091                    <th class="effectivePopReferenceLabel">Reference</th>
1092                    <th class="effectivePopLastUpdateLabel">Last Update</th>
1093                  </tr>
1094                </thead>
1095                <tbody id="pedigreeTableBody"></tbody>
1096              </table>
1097            </div>
1098          </div>
1099        </div>
1100      </div>
1101
1102      <div class="accordion-item border-0 border-bottom" id="geoDistribution">
1103        <h2 class="accordion-header">
1104          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
1105            data-bs-target="#collapseGeo">
1106            <span id="geoDistributionSection">Geo Distribution</span>
1107          </button>
1108        </h2>
1109        <div id="collapseGeo" class="accordion-collapse collapse">
1110          <div class="accordion-body table-responsive">
1111            <table class="table table-sm table-striped mb-0">
1112              <tr>
1113                <td class="fw-bold text-secondary w-25"><label id="geoDistributionImplementedLabel">Available</label>
1114                </td>
1115                <td><content-text id="GeoDistribution_GeoDistribution_Implemented"></content-text></td>
1116              </tr>
1117              <tr>
1118                <td class="fw-bold text-secondary"><label id="geoDistributionMostRecentYearLabel">Most recent
1119                    Year</label></td>
1120                <td><content-text id="GeoDistribution_MostRecentYear"></content-text></td>
1121              </tr>
1122              <tr>
1123                <td class="fw-bold text-secondary"><label id="geoDistributionDensityLabel">Density available</label>
1124                </td>
1125                <td><content-text id="GeoDistribution_Density"></content-text></td>
1126              </tr>
1127              <tr>
1128                <td class="fw-bold text-secondary"><label id="geoDistributionLinkLabel">Geographical Distribution
1129                    tool</label></td>
1130                <td><span id="GeoDistribution_link"></span></td>
1131              </tr>
1132              <tr>
1133                <td class="fw-bold text-secondary"><label id="geoDistributionExportLabel">Export Excel file</label></td>
1134                <td><content-text id="GeoDistribution_export"></content-text></td>
1135              </tr>
1136            </table>
1137          </div>
1138        </div>
1139      </div>
1140
1141      <div class="accordion-item border-0 border-bottom" id="BreedingProgramme">
1142        <h2 class="accordion-header">
1143          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
1144            data-bs-target="#collapseBreeding">
1145            <span id="breedingProgrammeSection">Breeding Programme</span>
1146          </button>
1147        </h2>
1148        <div id="collapseBreeding" class="accordion-collapse collapse">
1149          <div class="accordion-body table-responsive">
1150            <table class="table table-sm table-striped mb-0">
1151              <tr>
1152                <td class="fw-bold text-secondary w-50"><label
1153                    id="breedingProgrammeImplementedLabel">Implemented</label></td>
1154                <td><content-text id="BreedingProgramme_breedingProgrammeImplemented"></content-text></td>
1155              </tr>
1156              <tr>
1157                <td class="fw-bold text-secondary"><label id="animalIdentificationLabel">Animal Identification</label>
1158                </td>
1159                <td><content-text id="BreedingProgramme_animalIdentification"></content-text></td>
1160              </tr>
1161              <tr>
1162                <td class="fw-bold text-secondary"><label id="breedingGoalDefinedLabel">Breeding Goal Defined</label>
1163                </td>
1164                <td><content-text id="BreedingProgramme_breedingGoalDefined"></content-text></td>
1165              </tr>
1166              <tr>
1167                <td class="fw-bold text-secondary"><label id="performanceRecordingLabel">Performance Recording</label>
1168                </td>
1169                <td><content-text id="BreedingProgramme_performanceRecording"></content-text></td>
1170              </tr>
1171              <tr>
1172                <td class="fw-bold text-secondary"><label id="pedigreeRecordingLabel">Pedigree Recording</label></td>
1173                <td><content-text id="BreedingProgramme_pedigreeRecording"></content-text></td>
1174              </tr>
1175              <tr>
1176                <td class="fw-bold text-secondary"><label id="geneticEvaluationLabel">Genetic Evaluation</label></td>
1177                <td><content-text id="BreedingProgramme_geneticEvaluation"></content-text></td>
1178              </tr>
1179              <tr>
1180                <td class="fw-bold text-secondary"><label
1181                    id="geneticEvaluationIncludingGenomicInformationLabel">Evaluation Including Genomic</label></td>
1182                <td><content-text id="BreedingProgramme_geneticEvaluationIncludingGenomicInformation"></content-text>
1183                </td>
1184              </tr>
1185              <tr>
1186                <td class="fw-bold text-secondary"><label id="managementOfGeneticVariationLabel">Management Of Genetic
1187                    Variation</label></td>
1188                <td><content-text id="BreedingProgramme_managementOfGeneticVariation"></content-text></td>
1189              </tr>
1190              <tr>
1191                <td class="fw-bold text-secondary"><label id="artificialInseminationLabel">Artificial
1192                    Insemination</label></td>
1193                <td><content-text id="BreedingProgramme_artificialInsemination"></content-text></td>
1194              </tr>
1195              <tr>
1196                <td class="fw-bold text-secondary"><label id="breedingMethodAppliedLabel">Breeding Method
1197                    Applied</label></td>
1198                <td><content-text id="BreedingProgramme_breedingMethodApplied"></content-text></td>
1199              </tr>
1200            </table>
1201          </div>
1202        </div>
1203      </div>
1204
1205      <div class="accordion-item border-0 border-bottom" id="ConservationProgramme">
1206        <h2 class="accordion-header">
1207          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
1208            data-bs-target="#collapseConservation">
1209            <span id="conservationProgrammeSection">Conservation programme</span>
1210          </button>
1211        </h2>
1212        <div id="collapseConservation" class="accordion-collapse collapse">
1213          <div class="accordion-body">
1214
1215            <div class="d-flex justify-content-end mb-3">
1216              <div class="export-container d-flex align-items-center bg-light p-2 border rounded shadow-sm">
1217                <span class="me-3 fw-bold text-secondary small text-uppercase">Export:</span>
1218                <div class="btn-group export-toggle" role="group">
1219                  <input type="radio" class="btn-check" name="exportFormatCons" id="formatCsvCons" value="csv" checked>
1220                  <label class="btn btn-outline-primary btn-sm d-flex align-items-center" for="formatCsvCons"><i
1221                      class="material-icons fs-6 me-1">description</i> CSV</label>
1222                  <input type="radio" class="btn-check" name="exportFormatCons" id="formatExcelCons" value="excel">
1223                  <label class="btn btn-outline-primary btn-sm d-flex align-items-center" for="formatExcelCons"><i
1224                      class="material-icons fs-6 me-1">table_chart</i> Excel</label>
1225                </div>
1226                <button class="btn btn-primary btn-sm ms-2 d-flex align-items-center"
1227                  onclick="handleSectionExport(['#inVivoTableExport', '#cryoTableExport'], ['In_Vivo', 'Cryo'], 'Conservation_Programme', 'exportFormatCons')">
1228                  <i class="material-icons me-1">download</i> <span class="fw-bold">Download</span>
1229                </button>
1230              </div>
1231            </div>
1232
1233            <h5 id="inVivoProgrammesLabel" class="mt-2 text-primary fw-bold">In Vivo Programmes</h5>
1234            <div class="table-responsive table-responsive-custom mb-4">
1235              <table id="inVivoTableExport"
1236                class="table table-sm table-bordered table-striped text-nowrap align-middle text-center mb-0">
1237                <thead class="table-light text-secondary small">
1238                  <tr>
1239                    <th id="startYearLabel">Start</th>
1240                    <th id="endYearLabel">End</th>
1241                    <th id="numberOfHerdsIncludedLabel">Herds</th>
1242                    <th id="numberOfMalesIncludedLabel">Males</th>
1243                    <th id="numberOfFemalesIncludedLabel">Females</th>
1244                    <th id="locationLabel">Location</th>
1245                    <th id="sourceOfFinancingLabel">Source of financing</th>
1246                    <th id="implementingOrganisationLabel">Organisation</th>
1247                    <th id="organisationRoleLabel">Role</th>
1248                    <th id="descriptionLabel">Description</th>
1249                  </tr>
1250                </thead>
1251                <tbody id="vivoTable"></tbody>
1252              </table>
1253            </div>
1254
1255            <h5 id="cryoProgrammesLabel" class="text-primary mt-4 fw-bold">Cryo Programmes</h5>
1256            <div class="table-responsive table-responsive-custom">
1257              <table id="cryoTableExport"
1258                class="table table-sm table-bordered table-striped text-nowrap align-middle text-center mb-0">
1259                <thead class="table-light text-secondary small">
1260                  <tr>
1261                    <th id="yearLabel">Year</th>
1262                    <th id="semenSamplesLabel">Semen samples</th>
1263                    <th id="semenMalesDonorsLabel">Semen Males donors</th>
1264                    <th id="embryosSamplesLabel">Embryos Samples</th>
1265                    <th id="embryosDonorsTotalLabel">Embryos donors Total</th>
1266                    <th id="embryosDonorsMalesLabel">Embryos Males</th>
1267                    <th id="embryosDonorsFemalesLabel">Embryos Females</th>
1268                    <th id="oocytesSamplesLabel">Oocytes Samples</th>
1269                    <th id="oocytesFemalesDonorsLabel">Oocytes Females</th>
1270                    <th id="somaticCellsSamplesLabel">Somatic Cells</th>
1271                    <th id="somaticCellsDonorsTotalLabel">Somatic donors Total</th>
1272                    <th id="somaticCellsDonorsMalesLabel">Somatic Males</th>
1273                    <th id="somaticCellsDonorsFemalesLabel">Somatic Females</th>
1274                    <th id="DNASamplesLabel">DNA Samples</th>
1275                    <th id="DNADonorsTotalLabel">DNA Total</th>
1276                    <th id="DNADonorsMalesLabel">DNA Males</th>
1277                    <th id="DNADonorsFemalesLabel">DNA Females</th>
1278                    <th id="sufficientLabel">Sufficient</th>
1279                    <th id="organisationLabel">Organisation</th>
1280                    <th id="collectedByLabel">Collected by</th>
1281                  </tr>
1282                </thead>
1283                <tbody id="cryoTable"></tbody>
1284              </table>
1285            </div>
1286          </div>
1287        </div>
1288      </div>
1289
1290      <div class="accordion-item border-0 border-bottom" id="Organisations">
1291        <h2 class="accordion-header">
1292          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
1293            data-bs-target="#collapseOrgs">
1294            <span id="organisationsSection">Organisations</span>
1295          </button>
1296        </h2>
1297        <div id="collapseOrgs" class="accordion-collapse collapse">
1298          <div class="accordion-body table-responsive">
1299            <table class="table table-sm table-striped mb-0">
1300              <thead class="table-light text-secondary small text-uppercase">
1301                <tr>
1302                  <th id="organisationNameLabel">Name</th>
1303                  <th id="organisationDepartmentLabel">Department</th>
1304                  <th id="organisationInstitutionLabel">Institution</th>
1305                  <th id="orgTypeLabel">Type</th>
1306                  <th id="orgFunctionsLabel">Functions</th>
1307                  <th id="organisationLinksLabel">Links</th>
1308                  <th id="organisationCountryLabel">Country</th>
1309                </tr>
1310              </thead>
1311              <tbody id="organisationsTable"></tbody>
1312            </table>
1313          </div>
1314        </div>
1315      </div>
1316
1317      <div class="accordion-item border-0" id="Publications">
1318        <h2 class="accordion-header">
1319          <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse"
1320            data-bs-target="#collapsePubs">
1321            <span id="publicationsSection">Publications</span>
1322          </button>
1323        </h2>
1324        <div id="collapsePubs" class="accordion-collapse collapse">
1325          <div class="accordion-body table-responsive">
1326            <table class="table table-sm table-striped mb-0">
1327              <thead class="table-light text-secondary small text-uppercase">
1328                <tr>
1329                  <th id="publicationTitleLabel">Title</th>
1330                  <th id="publicationAuthorLabel">Author</th>
1331                  <th id="publicationDescriptionLabel">Description</th>
1332                  <th id="publicationURLLabel">Link</th>
1333                  <th id="publicationDateLabel">Date</th>
1334                </tr>
1335              </thead>
1336              <tbody id="publicationsTable"></tbody>
1337            </table>
1338          </div>
1339        </div>
1340      </div>
1341
1342    </div>
1343  </div>
1344
1345  <div class="modal fade" id="modalRiskHelp" tabindex="-1" aria-labelledby="help" aria-hidden="true">
1346    <div class="modal-dialog modal-dialog-centered">
1347      <div class="modal-content">
1348        <div class="modal-header bg-primary text-white">
1349          <h5 class="modal-title d-flex align-items-center"><i class="material-icons me-2">help</i><span
1350              id="help">Help</span></h5>
1351          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
1352        </div>
1353        <div class="modal-body text-secondary small">
1354          <ul class="list-unstyled lh-lg mb-0">
1355            <li><i class="material-icons text-primary-modal fs-6 me-2 align-middle">adjust</i> <span
1356                id="riskHelp1">External circle indicates global risk level.</span></li>
1357            <li><i class="material-icons text-primary-modal fs-6 me-2 align-middle">lens</i> <span
1358                id="riskHelp2">Internal circle indicates national risk level.</span></li>
1359            <li><i class="material-icons text-primary-modal fs-6 me-2 align-middle">palette</i> <span
1360                id="riskHelp3">Color codes: green = not at risk, red = at risk, grey = unknown, black =
1361                extinct.</span></li>
1362            <li><i class="material-icons text-primary-modal fs-6 me-2 align-middle">trending_up</i> <span
1363                id="riskHelp4">The inner arrow, if present, indicates the trend in number of national breed
1364                population.</span></li>
1365            <li><i class="material-icons text-primary-modal fs-6 me-2 align-middle">chat</i> <span
1366                id="riskHelp5">Comment: only one circle means the breed is local.</span></li>
1367          </ul>
1368        </div>
1369        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
1370        </div>
1371      </div>
1372    </div>
1373  </div>
1374
1375  <div class="modal fade" id="modal1" tabindex="-1" aria-hidden="true">
1376    <div class="modal-dialog modal-dialog-centered">
1377      <div class="modal-content">
1378        <div class="modal-header bg-primary text-white">
1379          <h5 class="modal-title" id="emailTitle">Wrong translation notification</h5>
1380          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
1381        </div>
1382        <div class="modal-body">
1383          <p id="emailDescription" class="text-secondary small">If you think that the automatic translation is not
1384            correct please fill and submit the next form. We will take care of your feedback.</p>
1385          <form id="notificationForm">
1386            <input type="hidden" name="callerid" id="callerid" />
1387            <div class="mb-3"><label for="email" class="form-label fw-bold" id="emailLabel">*email</label><input
1388                type="email" class="form-control" id="email" required></div>
1389            <div class="mb-3"><label for="message" class="form-label fw-bold"
1390                id="emailMessage">*message</label><textarea class="form-control" id="message" rows="3"
1391                required></textarea></div>
1392          </form>
1393        </div>
1394        <div class="modal-footer">
1395          <button type="button" class="btn btn-secondary" onclick="resetForm()" data-bs-dismiss="modal">Dismiss</button>
1396          <button type="button" class="btn btn-primary" onclick="errorReportNew()" data-bs-dismiss="modal">
1396Send</button>
1397        </div>
1398      </div>
1399    </div>
1400  </div>
1401
1402  <div class="offcanvas offcanvas-start shadow" tabindex="-1" id="side-nav">
1403    <div class="offcanvas-header border-bottom bg-primary-light">
1404      <h5 class="offcanvas-title text-primary fw-bold w-100 text-center" id="summaryLeftMenu">Summary</h5>
1405      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
1406    </div>
1407    <div class="offcanvas-body p-0">
1408      <div class="list-group list-group-flush border-0">
1409        <a class="list-group-item list-group-item-action py-3 border-0" id="generalInformationLeftMenu" href="#"
1410          onclick="goToProfileSection('profileCard')">General information</a>
1411        <a class="list-group-item list-group-item-action py-3 border-0" id="imagesLeftMenu" href="#"
1412          onclick="goToProfileSection('images')">Images</a>
1413        <a class="list-group-item list-group-item-action py-3 border-0" id="localNamesLeftMenu" href="#"
1414          onclick="goToProfileSection('BreedLocalNames')">Local names</a>
1415        <a class="list-group-item list-group-item-action py-3 border-0" id="usesLeftMenu" href="#"
1416          onclick="goToProfileSection('Uses')">Uses</a>
1417        <a class="list-group-item list-group-item-action py-3 border-0" id="originAndDevelopmentLeftMenu" href="#"
1418          onclick="goToProfileSection('OriginAndDevelopment')">
1418Origin and development</a>
1419        <a class="list-group-item list-group-item-action py-3 border-0" id="additionalInformationLeftMenu" href="#"
1420          onclick="goToProfileSection('BreedAdditionalInformation')">Additional information</a>
1421        <a class="list-group-item list-group-item-action py-3 border-0" id="qualitiesInformationLeftMenu" href="#"
1422          onclick="goToProfileSection('BreedQualitiesInformation')">Qualities information</a>
1423        <a class="list-group-item list-group-item-action py-3 border-0" id="morphologyInformationLeftMenu" href="#"
1424          onclick="goToProfileSection('BreedMorphologyInformation')">Morphology information</a>
1425        <a class="list-group-item list-group-item-action py-3 border-0" id="coloursLeftMenu" href="#"
1426          onclick="goToProfileSection('BreedColours')">Colours</a>
1427        <a class="list-group-item list-group-item-action py-3 border-0 hornsControl" id="hornsInformationLeftMenu"
1428          href="#" onclick="goToProfileSection('BreedHornsInformation')" style="display:none;">Horns information</a>
1429        <a class="list-group-item list-group-item-action py-3 border-0" id="performanceInformationLeftMenu" href="#"
1430          onclick="goToProfileSection('BreedPerformanceInformation')">Performance information</a>
1431        <a class="list-group-item list-group-item-action py-3 border-0 eggsControl" id="eggsInformationLeftMenu"
1432          href="#" onclick="goToProfileSection('EggsInformation')" style="display:none;">Eggs information</a>
1433        <a class="list-group-item list-group-item-action py-3 border-0 fibreControl" id="fibreInformationLeftMenu"
1434          href="#" onclick="goToProfileSection('FibreInformation')" style="display:none;">Fibre information</a>
1435        <a class="list-group-item list-group-item-action py-3 border-0 birdControl" id="specificCharacteristicLeftMenu"
1436          href="#" onclick="goToProfileSection('SpecificCharacteristic')" style="display:none;">Specific
1437          characteristic</a>
1438        <a class="list-group-item list-group-item-action py-3 border-0 milkControl" id="milkInformationLeftMenu"
1439          href="#" onclick="goToProfileSection('BreedMilkInformation')" style="display:none;">Milk information</a>
1440        <a class="list-group-item list-group-item-action py-3 border-0 prolificacyControl" id="prolificacyLeftMenu"
1441          href="#" onclick="goToProfileSection('Prolificacy')" style="display:none;">Prolificacy</a>
1442        <a class="list-group-item list-group-item-action py-3 border-0" id="managementConditionsLeftMenu" href="#"
1443          onclick="goToProfileSection('ManagementConditions')">Management conditions</a>
1444        <a class="list-group-item list-group-item-action py-3 border-0" id="populationDataLeftMenu" href="#"
1445          onclick="goToProfileSection('PopulationData')">Population data</a>
1446        <a class="list-group-item list-group-item-action py-3 border-0" id="effectivePopulationLeftMenu" href="#"
1447          onclick="goToProfileSection('EffectivePopulation')">Effective population size</a>
1448        <a class="list-group-item list-group-item-action py-3 border-0" id="breedingProgrammeLeftMenu" href="#"
1449          onclick="goToProfileSection('BreedingProgramme')">Breeding Programme</a>
1450        <a class="list-group-item list-group-item-action py-3 border-0" id="conservationProgrammeLeftMenu" href="#"
1451          onclick="goToProfileSection('ConservationProgramme')">Conservation programme</a>
1452        <a class="list-group-item list-group-item-action py-3 border-0" id="organisationsLeftMenu" href="#"
1453          onclick="goToProfileSection('Organisations')">Organisations</a>
1454        <a class="list-group-item list-group-item-action py-3 border-0" id="publicationsLeftMenu" href="#"
1455          onclick="goToProfileSection('Publications')">Publications</a>
1456      </div>
1457    </div>
1458  </div>
1459
1460  <button class="btn btn-primary rounded-circle shadow fao-fab" id="fabUp" onclick="scrollToTop()" title="Go to Top">
1461    <i class="material-icons d-block">arrow_upward</i>
1462  </button>
1463
1464  <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1100">
1465    <div id="appToast" class="toast align-items-center text-white border-0" role="alert" aria-live="assertive"
1466      aria-atomic="true">
1467      <div class="d-flex">
1468        <div class="toast-body fw-bold" id="appToastBody"></div>
1469        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
1470          aria-label="Close"></button>
1471      </div>
1472    </div>
1473  </div>
1474
1475  <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel"
1476    aria-hidden="true">
1477    <div class="modal-dialog modal-xl modal-dialog-centered">
1478      <div class="modal-content">
1479        <div class="modal-header bg-primary text-white">
1480          <h5 class="modal-title fw-bold text-uppercase" id="imagePreviewModalLabel">Image Preview</h5>
1481          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
1482        </div>
1483        <div class="modal-body text-center p-2 bg-light">
1484          <img src="" id="modalPreviewImage" class="img-fluid rounded shadow-sm" alt="Preview"
1485            style="max-height: 85vh; object-fit: contain;">
1486        </div>
1487      </div>
1488    </div>
1489  </div>
1490
1491  <!--     
1491<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
1491
1492    
1492<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
1492 -->
1493  
1493<script src="https://code.jquery.com/jquery-3.7.1.min.js"
1494    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
1494
1495  
1495<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
1496    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
1497    crossorigin="anonymous"></script>
1497
1498  
1498<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
1498
1499  
1499<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
1499
1500  
1500<script src="./assets/js/jquery.i18n.properties.js"></script>
1500
1501  
1501<script src="./assets/js/main.js"></script>
1501
1502</body>
1503
1504</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.