<!DOCTYPE html>
<html lang="fr" class="h-full">
  <head>
    {{ partial "head.html" . }}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.1/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <script src="https://unpkg.com/leaflet@1.9.1/dist/leaflet.js" integrity="sha256-NDI0K41gVbWqfkkaHj15IzU7PtMoelkzyKp8TOaFQ3s=" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
	<script src="/leaflet.permalink.js"></script>
  </head>
  <body class="h-full relative">
      <div class="bg-white">
        {{ partial "header.html" . }}
      </div>
        <div class="absolute sm:bg-opacity-80 left-0 bottom-0 right-0 h-14 w-full max-w-none sm:w-80 sm:right-auto sm:left-4 sm:bottom-4 z-20 border-t sm:border border-green-700 bg-white sm:rounded-lg shadow-2xl p-4 text-center">
            <label class="inline-flex items-center mr-4">
                <input class="text-green-700" id="layerMSP" type="checkbox" checked="">
                <span class="ml-2">Maison de santé</span>
            </label>
            <label class="inline-flex items-center">
                <input class="text-green-700" id="layerPharmacie" type="checkbox">
                <span class="ml-2">Officine</span>
            </label>
        </div>

        <div id="info" class="hidden sm:bg-opacity-80 absolute left-0 bottom-14 sm:bottom-24 right-0 sm:right-auto sm:left-4 w-full max-w-none sm:w-80 z-20 border-t sm:border border-green-700 bg-white sm:rounded-lg sm:shadow-2xl prose">
        <!-- Modal content -->
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 border-b rounded-t-lg">
                <h4 class="title text-xl font-semibold text-gray-900 my-0">
                  MAISON DE SANTE (MSP) DE SAINT CHELY D'APCHER (48)
                </h4>
                <button type="button" class="btnClose bg-transparent border border-white hover:border-green-700 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex self-start" data-modal-hide="staticModal">
                    <svg class="w-5 h-5 stroke-green-700" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 space-y-6">
                <p id="content" class="text-base leading-relaxed text-gray-500 my-0">
                  Établissement FINESS N°480002732<br>
                  SIREN : 837840933
                </p>
            </div>
            <!-- Modal footer -->
            <div id="contact" class="flex justify-center items-center p-4 space-x-4 border-t border-gray-200 rounded-b-lg">
              <a id="phone" href="tel:0448250145" title="04 48 25 01 45" data-modal-hide="staticModal" type="button" class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 text-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 sm:w-5 sm:h-5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                </svg>
              </a>
              <a id="mail" href="tel:0448250145" title="04 48 25 01 45" data-modal-hide="staticModal" type="button" class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 text-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 sm:w-5 sm:h-5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                </svg>
              </a>
              <a id="website" href="tel:0448250145" title="04 48 25 01 45" data-modal-hide="staticModal" type="button" class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 text-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 sm:w-5 sm:h-5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
                </svg>
              </a>
              <button id="edit" onclick="displayLayout('editLayout')" title="Éditer" data-modal-hide="staticModal" type="button" class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 text-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 sm:w-5 sm:h-5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                </svg>
              </button>
            </div>
        </div>

        <div id="editLayout" class="hidden overflow-auto layout absolute sm:bg-opacity-90 left-0 sm:left-80 lg:left-auto sm:ml-8 top-20 bottom-14 sm:bottom-4 right-0 sm:right-4 lg:right-16 w-full sm:w-auto max-w-none lg:max-w-md z-30 border-t sm:border border-green-700 bg-white sm:rounded-lg sm:shadow-2xl prose">
          <div class="flex items-center justify-between p-4 border-b rounded-t-lg">
            <h4 class="title text-xl font-semibold text-gray-900 my-0">
              MAISON DE SANTE (MSP) DE SAINT CHELY D'APCHER (48)
            </h4>
            <button type="button" class="btnClose bg-transparent border border-white hover:border-green-700 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex self-start" data-modal-hide="staticModal">
                <svg class="w-5 h-5 stroke-green-700" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>  
            </button>
          </div>
          <!-- Modal body -->
          <div class="p-4 space-y-6">
            <form id="formInfo" method="POST" action="https://formulaire.p4pillon.org/items/MSP_INFO">
              <div class="grid grid-cols-1 gap-6">
                <label class="block">
                  <span class="text-gray-700">Nofinesset</span>
                  <input id="msp-nofinesset" type="text" name="nofinesset" class="mt-1 block w-full" placeholder="">
                </label>
                <label class="block">
                  <span class="text-gray-700">Nom</span>
                  <input id="msp-nom" type="text" name="nom" class="mt-1 block w-full" placeholder="">
                </label>
                <label class="block">
                  <span class="text-gray-700">Prénom Leader</span>
                  <input id="msp-prenom_leader" type="text" name="prenom_leader" class="mt-1 block w-full" placeholder="">
                </label>
                <label class="block">
                  <span class="text-gray-700">Nom Leader</span>
                  <input id="msp-nom_leader" type="text" name="nom_leader" class="mt-1 block w-full" placeholder="">
                </label>
                <div class="block">
                  <label class="inline-flex items-center">
                    <input id="msp-avec_sante" type="checkbox" checked="" name="avec_sante">
                    <span class="ml-2">Avec santé</span>
                  </label>
                </div>
                <div class="block">
                  <label class="inline-flex items-center">
                    <input id="msp-accord_conventionnel_interprofessionnel" type="checkbox" checked="" name="accord_conventionnel_interprofessionnel">
                    <span class="ml-2">Accord Conventionnel Interprofessionnel</span>
                  </label>
                </div>
              </div>
              <div class="block">
                <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Envoyer</button>
              </div>

            </form>



            <fieldset class="hidden">
              <legend>informations générales</legend>
              <label for="noms">Nom de la structure :</label>
              <input type="text" name="structure" placeholder="nom de la SISA" required="required">
              <label for="ville">Ville :</label>
              <input type="text" name="structure" placeholder="ville" required="required">
              <label for="code">Code postal :</label>
              <input type="text" name="structure" placeholder="Ex: 87000" required="required">
              <label for="rue"> Rue :</label>
              <input type="text" name="structure" placeholder="Ex: " required="required">



            <!-- A mettre : dans un premier temps pouvoir mettre un chiffre puis dans un second temps le ventiullé sur le type de praticien -->
            <label for="npro">Nombre professionnels</label>
            <select>
              <option selected>Choisissez</option>
              <option>moins de 16 professionnels</option>
              <option>plus de 16 professionnels</option>
            </select>

            <div class="open">
              <!-- A mettre -->
              <label for="ipa">Présence d'un IPA dans l'équipe</label>
              <label for="yes">Oui</label><input type="radio" name="yes" id="yes" /><label for="no">Non</label><input
                type="radio" name="no" id="no" />
            </div>


            <div class="open">
              <!-- A mettre -->
              <label for="ipam">Formation des jeunes professionnels de santé</label>
              <label for="prof_sant_yes">Oui</label><input type="radio" name="prof_sant" value="true"
                id="prof_sant_yes" /><label for="no">Non</label><input type="radio" name="no" id="no" />
            </div>


            <div class="open">
              <!-- A mettre + champ pour citer le logiciel utilisé (il faut la liste) -->
              <!-- Système d'information labellisé :  -->
              <!-- https://esante.gouv.fr/offres-services/label-esante/solutions-labellisees -->
              <label for="sina">Système d'information labellisé niveau avancé (ASIP Santé)</label>
              <label for="yes">Oui</label><input type="radio" name="yes" id="yes" /><label for="no">Non</label><input
                type="radio" name="no" id="no" />
            </div>

            <input type="submit" name="submit" value="ENVOYER">
            </fieldset>
          </div>
        </div>

        <div id="zoom" class="hidden sm:flex flex-col-reverse items-center justify-between absolute bottom-4 right-4 w-8 h-16 z-20 sm:shadow-2xl">
          <button id="btnLess" type="button" class="p-1.5 bg-white border rounded-b-lg border-green-700 hover:bg-green-700 stroke-green-700 stroke-2 hover:stroke-white" data-modal-hide="staticModal">
            <svg class="w-full h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
            </svg>
          </button>
          <button id="btnMore" type="button" class="p-1.5 bg-white border-t border-x rounded-t-lg border-green-700 hover:bg-green-700 stroke-green-700 stroke-2 hover:stroke-white" data-modal-hide="staticModal">
            <svg class="w-full h-5"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
          </button>
        </div>

        <div class="absolute w-screen h-screen bottom-0 left-0 top-0 right-0 z-10">
            <div id="map" style="width: 100%; height: 100%;" class=""></div>
        </div>
    {{ $js := resources.Get "scripts/annuaire.js" }}
    {{ with $js }}
    {{ $secureJS := . | js.Build }}
    {{ if not $.Site.Params.debug }}
    {{ $secureJS = $secureJS | minify }}
    {{ end }}
    {{ $secureJS = $secureJS | fingerprint }}
    <script type="module" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
    {{ end }}
    {{ partial "scripts.html" . }}
  </body>
</html>
