<div id="flapSocial" class="tab-pane fade in window-settings-social">
   <div class="bottom-space">
      <h1 class="h4 main-panel-title">{'title'|translate:'socialSettingsTab'}</h1>
   </div>
   <div class="form-group">
       <div class="col-md-12">
          {'socialSettingsWarning'|translate:'socialSettingsTab'}
       </div>
   </div>
   {$socials = ['Instagram', 'Facebook', 'Twitter', 'Youtube', 'Pinterest', 'LinkedIn', 'TikTok']}
   {foreach $socials as $social}
      <div class="form-group">
         <label class="col-md-2 text-left">
            <span class="fc icons_{$social|lower}"></span> {$social}
         </label>
         {$social = $social|lower}
         {$isEmpty = false}

         {if array_key_exists($social, $body.data.social) && is_null($body.data.social[$social])}
            {$isEmpty = true}
         {/if}

         <div class="col-md-5">
            <div class="input-group" data-input-overwrite>
               <input type="url" class="form-control input-sm" size="30" name="data[social][{$social}]"
                      value="{if !$isEmpty}{$body.data.social[$social]}{/if}" placeholder="{$dbcfg.social[$social]}">
               {if $type == 'languagesSettings'}
                  {input_overwrite value_path=['social', $social] isEmpty=$isEmpty}
               {/if}
            </div>
         </div>
      </div>

       {if $social == 'instagram'}
          <div class="form-group">
             <label class="col-md-2">
                Token
             </label>
             <div class="col-md-5">
                <div class="input-group" data-input-overwrite>
                   <input type="text" class="form-control input-sm" size="30" name="data[instagram][api]"
                          value="{$body.data.instagram.api}" placeholder="{$dbcfg.instagram.api}">
                    {if $type == 'languagesSettings'}
                        {input_overwrite value_path=['instagram', 'api'] isEmpty=(array_key_exists('api', $body.data.instagram) && is_null($body.data.instagram.api))}
                    {/if}
                </div>
             </div>
             <div class="col-md-2">
                <button class="btn btn-block btn-primary" onclick="window.open('https://imagefeed.wpjshop.cz/connect_wpjshop', 'instagram', 'width=500,height=700');">Získat token</button>
             </div>
             {if $body.data.instagram.api}
                <div class="col-md-3">
                   <button type="submit" name="acn" value="updateInstagram" class="btn btn-block btn-success">Aktualizace z Instagramu</button>
                   <input type="hidden" name="data[instagram][refresh_time]" value="{$body.data.instagram.refresh_time}">
                </div>
             {/if}
          </div>

             {if $body.data.instagram.username and $body.data.instagram.api}
                <div class="form-group">
                   <label class="col-md-2">
                      Profil
                   </label>
                    <div class="col-md-5">
                      <input type="text" class="form-control input-sm" readonly name="data[instagram][username]" value="{$body.data.instagram.username}">
                    </div>
                </div>
             {/if}
       {/if}
   {/foreach}
</div>
