<div class="container-fluid">
  <div class="row">
    <div class="col-sm-8 col-md-9">


      <div class="page-header page-header-bleed-right">

        <div class="actions pull-right">
          <ul class="list-inline">
            <li><a href ng-click="wizard03RegisterDevice.editAppName()"><span class="pficon pficon-edit"></span> Edit Name</a></li>
          </ul>
        </div>

        <h1>{{ wizard03RegisterDevice.app.name }}</h1>
      </div>


      <div class="actions pull-right">
        <ul class="list-inline">
          <li><a href ng-click="wizard03RegisterDevice.editVariant()"><span class="pficon pficon-edit"></span> Edit Variant</a></li>
        </ul>
      </div>

      <h2 class="ups-variant-name-header ups-has-icon ups-variant-{{ wizard03RegisterDevice.variant.type }}">
        <strong>{{ wizard03RegisterDevice.variant.name }}:</strong>
        <span class="muted"><i class="fa fa-ban"></i> No installation yet</span>
      </h2>

      <p><strong>We are half way there!</strong> Use the code snippet bellow to <a ups-doc="register-device-{{ wizard03RegisterDevice.variant.type }}">register your device</a> and allow it to receiving notifications through this UnifiedPush Server. If you don't know how to do this, <a ups-doc="step-by-step-{{ wizard03RegisterDevice.variant.type }}">go to the documentation for full step by step explanation</a>.</p>

      <ol>
        <li>Copy the code snippet and paste it on your device code.</li>
        <li>Build and deploy your app.</li>
        <li>Click <a ng-link="wizard04SendPushNotification">Next (Bellow)</a></li>
      </ol>



      <ups-client-snippets variant="wizard03RegisterDevice.variant"></ups-client-snippets>

      <p>Next we are going to send a test notification. Make sure you <a ups-doc="build-and-deploy-{{ wizard03RegisterDevice.variant.type }}">build or deploy your app</a> after pasting the snippet.</p>

      <div class="actions pull-right ups-wizard-actions">
        <a ng-link="wizard04SendPushNotification" class="btn btn-primary btn-lg">Next <i class="fa fa-angle-double-right"></i></a>
      </div>


    </div><!-- /col -->


    <div class="col-sm-4 col-md-3 sidebar-pf sidebar-pf-right">

      <div class="sidebar-header sidebar-header-bleed-left sidebar-header-bleed-right">
        <div class="actions pull-right">
          <a href="#"><a ng-link="appDetail({app: wizard03RegisterDevice.app.pushApplicationID, tab: 'variants'})">Skip the wizard <i class="fa fa-angle-double-right"></i></a>
        </div>
        <h2 class="h5">Wizard steps</h2>
      </div>
      <ol class="list-unstyled ups-steps">
        <li class="done"><strong><i class="fa fa-check"></i></strong> Create your first Application</li>
        <li class="done"><strong><i class="fa fa-check"></i></strong> Add a variant</li>
        <li class="active"><strong>3</strong> Mobile device: Set up variant</li>
        <li><strong>4</strong> Test! Send notification</li>
        <li><strong>5</strong> Backend: Set up sender API</li>
      </ol>



    </div><!-- /col -->
  </div><!-- /row -->
</div><!-- /container -->
