const planData = Object.keys(PLAN_DATA);
const plans = document.getElementById("all-plans");
for (const key of planData) {
  const data = PLAN_DATA[key];
  plans.innerHTML += `
    
    <div id="plan">
        <div class="plan-title">
            <h2>${data.title}</h2>
            </div>
            <div class="plan-content">
            <span class="plan-detail">
                <i class="fas fa-check icon-check"></i>
                <p>${data.interval}</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(1);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                }
            </span>
            <span class="plan-detail">
                <i class="fas fa-check icon-check"></i>
                <p>${data.history}</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(2);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">
                <i class="fas fa-check icon-check"></i>
                <p>${data.commands}</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(3);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">  
                <i class="fas fa-check icon-check"></i>            
                <p>${data.monitor}</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(4);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">
                <i class="fas fa-check icon-check"></i>
                <p>Suporte preferencial</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(6);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">
                <i class="fas fa-check icon-check"></i>
                <p>Sem anúncios</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(9);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">
                <i class="fas fa-${data.fence} icon-uncheck"></i>
                <p>Cerca Virtual</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(5);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">
                <i class="fas fa-${data.reports} icon-uncheck"></i>
                <p>Relatórios</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(7);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">            
                <i class="fas fa-${data.shared} icon-uncheck"></i>
                <p>Compartilhamento</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(8);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">
                <i class="fas fa-${data.group} icon-uncheck"></i>
                <p>Grupos</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(10);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">            
                <i class="fas fa-${data.manager} icon-uncheck"></i>
                <p>Função Gerente</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(11);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">            
                <i class="fas fa-${data.googleMaps} icon-uncheck"></i>
                <p>Google Maps</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(12);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <span class="plan-detail">            
                <i class="fas fa-${data.integrations} icon-uncheck"></i>
                <p>Integrações</p>
                ${
                  data.icone
                    ? `<button class="icon-about" id="equip-mes" onClick='openModal(); modalContent(13);'><i class="fas fa-question-circle"></i></button>`
                    : `<button hidden></button>`
                } 
            </span>
            <div class='line'></div>
            <span class="plan-detail-title" style="margin-bottom:1rem;margin-top:1rem">
            <h3><s>${data.price}</s></h3>
                <h3>${data.price2}</h3>
            </span>
            <p style="font-size: 0.9rem">por equipamento por mês</p> 
            <span class="plan-discount" style="margin-top:1rem">
            <h3>${data.discount}</h3></span>                      
            </div>
    </div>
    `;
}