<div class="wizard-header">
  <h3 class="wizard-title" style="margin-bottom: 5px">
    <i class="fa fa-database fa-lg" aria-hidden="true"></i>
    Smart Report Maker Installation wizard
  </h3>
</div>
<div class="wizard-navigation">
  <div class="progress-with-circle">

    <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" style="width:
    <?php
    if (config_native('srm_config.installer.is_settings_step_needed')): ?>
      <?=urlIs('/') ? '10%' : '';?>
      <?=urlIs('/permissions') ? '30%' : '';?>
      <?=urlIs('/database') ? '50%' : '';?>
      <?=urlIs('/profile') ? '70%' : '';?>
      <?=urlIs('/settings') ? '90%' : '';?>
<?php else: ?>
        <?=urlIs('/') ? '22%' : '';?>
      <?=urlIs('/permissions') ? '44%' : '';?>
      <?=urlIs('/database') ? '66%' : '';?>
      <?=urlIs('/profile') ? '88%' : '';?>

    <?php endif;?>"></div>
  </div>
  <ul class="steps nav nav-pills" id="tabs">
    <li id="begin" aria-expanded="true" style="width:
    <?php

        if (config_native('srm_config.installer.is_settings_step_needed')) {
            echo 100 / 5;
        } else {
            echo 100 / 4;
        }

    ?>%" class="<?=urlIs('/') ? 'active' : '';?>">
      <a href="<?=route_native('/')?>" aria-expanded="true">
        <div class="icon-circle checked">
          <i class="ti-save"></i>
        </div>
        Begin
      </a>
    </li>

    <?php
    if (!(is_docker() || is_hosted_version() || empty(check_write_permissions()))): ?>
    <li id="permissions" style="width:
    <?php

        if (config_native('srm_config.installer.is_settings_step_needed')) {
            echo 100 / 5;
        } else {
            echo 100 / 4;
        }

    ?>%" class="<?=urlIs('/permissions') ? 'active' : '';?>">
      <a href="<?=route_native('/permissions')?>" aria-expanded="false">
        <div
          class="icon-circle <?=urlIs('/permissions') || urlIs('/database') || urlIs('/profile') || urlIs('/settings') ? 'checked' : '';?>">
          <i class="ti-bookmark-alt"></i>
        </div>
        Permissions
      </a>
    </li>
    <?php endif;?>

    <li id="database" style="width:
    <?php

        if (config_native('srm_config.installer.is_settings_step_needed')) {
            echo 100 / 5;
        } else {
            echo 100 / 4;
        }

    ?>%" class="<?=urlIs('/database') ? 'active' : '';?>">
      <a href="<?=route_native('/database')?>" aria-expanded="false">
        <div class="icon-circle <?=urlIs('/database') || urlIs('/profile') || urlIs('/settings') ? 'checked' : '';?>">
          <i class="ti-server"></i>
        </div>
        Database
      </a>
    </li>
    <li class="<?=urlIs('/profile') ? 'active' : '';?>" style="width:
    <?php

        if (config_native('srm_config.installer.is_settings_step_needed')) {
            echo 100 / 5;
        } else {
            echo 100 / 4;
        }

    ?>%">
      <a href="<?=route_native('/profile')?>">
        <div class="icon-circle <?=urlIs('/profile') || urlIs('/settings') ? 'checked' : ''?>">
          <i class="ti-user"></i>
        </div>
        Profile
      </a>
    </li>

    <?php
    if (config_native('srm_config.installer.is_settings_step_needed')): ?>
    <li style="width:<?php

    if (config_native('srm_config.installer.is_settings_step_needed')) {
        echo 100 / 5;
    } else {
        echo 100 / 4;
    }

?>%" class="<?=urlIs('/settings') ? 'active' : '';?>">
      <a href="<?=route_native('/settings')?>">
        <div class="icon-circle <?=(urlIs('/settings')) ? 'checked' : '';?>">
          <i class="ti-calendar"></i>
        </div>
        Settings
      </a>
    </li>
    <?php endif;?>

  </ul>
</div>