export const ICON = {
  sensorOff: `<div style="display: flex;
                flex-direction: column;
                align-items: center">
              <div style="display: flex; flex-direction: row; gap: 5px">
                <div class="tooltip">
                  <img style="width: 30px; height: 30px;" src="assets/images/sensor-off.png">
                  <div class="tooltiptext">
                    <div style="display: flex;
                          flex-direction: row;
                          justify-content: space-between;">
                          <div style="color: #F33152;
                                                  padding: 5px 13px;
                                                  background-color: rgba(243, 49, 82, 0.1);
                                                  border-radius: 20px;
                                                  text-align: center;
                                                  width: 100px;">Sự cố cháy</div>
                          <a href="/overview/camera-stream">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
                              <g stroke="currentColor" stroke-width="2">
                                <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
                                <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
                              </g>
                            </svg>
                          </a>
                        </div>
                        <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
                        <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
                        <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
                        <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
                  </div>
                </div>

                <a href="/overview/camera-stream" target="_blank">
                  <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
                </a>
              </div>
            </div>
            <style>
            .tooltip {
                  position: relative;
                  display: inline-block;
                }
                .tooltip .tooltiptext {
                  visibility: hidden;
                  width: 300px;
                  padding: 10px;
                  background-color: #fff;
                  color: black;
                  border-radius: 6px;
                  position: absolute;
                  z-index: 1;
                  bottom: 100%;
                  left: 50%;
                  margin-left: -60px;
                }

              .tooltip:hover .tooltiptext {
                visibility: visible;
              }
          </style>`,
  sensorOn: `<div style="display: flex;
                flex-direction: column;
                align-items: center">
              <div style="display: flex; flex-direction: row; gap: 5px">
                <div class="tooltip">
                  <img style="width: 30px; height: 30px;" src="assets/images/sensor-on.png">
                  <div class="tooltiptext">
                    <div style="display: flex;
                          flex-direction: row;
                          justify-content: space-between;">
                          <div style="color: #F33152;
                                                  padding: 5px 13px;
                                                  background-color: rgba(243, 49, 82, 0.1);
                                                  border-radius: 20px;
                                                  text-align: center;
                                                  width: 100px;">Sự cố cháy</div>
                          <a href="/overview/camera-stream">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
                              <g stroke="currentColor" stroke-width="2">
                                <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
                                <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
                              </g>
                            </svg>
                          </a>
                        </div>
                        <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
                        <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
                        <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
                        <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
                  </div>
                </div>

                <a href="/overview/camera-stream" target="_blank">
                  <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
                </a>
              </div>
<!--              <div style="font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>-->
            </div>
            <style>
            .tooltip {
                  position: relative;
                  display: inline-block;
                }
                .tooltip .tooltiptext {
                  visibility: hidden;
                  width: 300px;
                  padding: 10px;
                  background-color: #fff;
                  color: black;
                  border-radius: 6px;
                  position: absolute;
                  z-index: 1;
                  bottom: 100%;
                  left: 50%;
                  margin-left: -60px;
                }

              .tooltip:hover .tooltiptext {
                visibility: visible;
              }
          </style>`,
  sensorActive: `<div>
                <div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">
                  <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>
                  <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>
                  <img  src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">
                </div>
                <img style="width: 30px; height: 30px;margin-left: 40px;" src="assets/images/camera.png">
                <style>
                  @keyframes sensor-on {
                    100% {
                      transform: scale(2);
                      opacity: 0;
                    }
                  }
                </style>
              </div>`,
  fireContent: `<div style="display: flex;
              flex-direction: row;
              justify-content: space-between;">
              <div style="color: #F33152;
                                      padding: 5px 13px;
                                      background-color: rgba(243, 49, 82, 0.1);
                                      border-radius: 20px;
                                      text-align: center;
                                      width: 100px;">Sự cố cháy</div>
              <a href="/overview/camera-stream" target="_blank">
                <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
                  <g stroke="currentColor" stroke-width="2">
                    <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
                    <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
                  </g>
                </svg>
              </a>
            </div>
            <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
            <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
            <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
            <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>`,

  sensorActiveSmoke: `
            <div style="display: flex;
                flex-direction: column;
                align-items: center">
              <div style="display: flex; flex-direction: row;  gap: 39px;width: 100%; justify-content: center;">
                <div class="tooltip">
                 <div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">
                  <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>
                  <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>
                  <img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">
                </div>

                  <div class="tooltiptext">
                    <div style="display: flex;
                          flex-direction: row;
                          justify-content: space-between;">
                          <div style="color: #F33152;
                                                  padding: 5px 13px;
                                                  background-color: rgba(243, 49, 82, 0.1);
                                                  border-radius: 20px;
                                                  text-align: center;
                                                  width: 100px;">Sự cố cháy</div>
                          <a href="/overview/camera-stream">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
                              <g stroke="currentColor" stroke-width="2">
                                <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
                                <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
                              </g>
                            </svg>
                          </a>
                        </div>
                        <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
                        <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
                        <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
                        <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
                  </div>
                </div>

                <a href="/overview/camera-stream" target="_blank">
                  <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
                </a>
              </div>
              <div style="background: #F11E1E; color: #FFF; padding: 2px 3px; font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>
            </div>
            <style>
            .tooltip {
                  position: relative;
                  display: inline-block;
                }
                .tooltip .tooltiptext {
                  visibility: hidden;
                  width: 300px;
                  padding: 10px;
                  background-color: #fff;
                  color: black;
                  border-radius: 6px;
                  position: absolute;
                  z-index: 1;
                  bottom: 100%;
                  left: 50%;
                  margin-left: -60px;
                }

              .tooltip:hover .tooltiptext {
                visibility: visible;
              }
               @keyframes sensor-on {
                    100% {
                      transform: scale(2);
                      opacity: 0;
                    }
                  }
          </style>`,
  sensorActiveVib: `
            <div style="display: flex;
                flex-direction: column;
                align-items: center">
              <div style="display: flex; flex-direction: row;  gap: 39px;width: 100%; justify-content: center;">
                <div class="tooltip">
                 <div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">
                  <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>
                  <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>
                  <img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">
                </div>

                  <div class="tooltiptext">
                    <div style="display: flex;
                          flex-direction: row;
                          justify-content: space-between;">
                          <div style="color: #F33152;
                                                  padding: 5px 13px;
                                                  background-color: rgba(243, 49, 82, 0.1);
                                                  border-radius: 20px;
                                                  text-align: center;
                                                  width: 100px;">Sự cố cháy</div>
                          <a href="/overview/camera-stream">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
                              <g stroke="currentColor" stroke-width="2">
                                <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
                                <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
                              </g>
                            </svg>
                          </a>
                        </div>
                        <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
                        <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
                        <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
                        <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
                  </div>
                </div>

                <a href="/overview/camera-stream" target="_blank">
                  <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
                </a>
              </div>
              <div style="background: #F11E1E; color: #FFF; padding: 2px 3px; font-size: 11px"><b>ALARM: VIBRATION ALERT</b></div>
            </div>
            <style>
            .tooltip {
                  position: relative;
                  display: inline-block;
                }
                .tooltip .tooltiptext {
                  visibility: hidden;
                  width: 300px;
                  padding: 10px;
                  background-color: #fff;
                  color: black;
                  border-radius: 6px;
                  position: absolute;
                  z-index: 1;
                  bottom: 100%;
                  left: 50%;
                  margin-left: -60px;
                }

              .tooltip:hover .tooltiptext {
                visibility: visible;
              }
               @keyframes sensor-on {
                    100% {
                      transform: scale(2);
                      opacity: 0;
                    }
                  }
          </style>`,
}