<?php
/**
 * Facebook Instant Articles for WP.
 * This source code is licensed under the license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @package default
 */
?>
<div class="instant-articles-card">
  <div class="instant-articles-card-content">
    <div class="instant-articles-card-content-box instant-articles-card-content-full">
      <h3>Setting up Instant Articles</h3>
      <div class="instant-articles-card-steps">
        <div class="instant-articles-card-step">
          <img src="/wp-content/plugins/facebook-instant-articles-wp/assets/key@2x.png">
          <p>Enter Facebook App ID and connect to Facebook to Enable Plugin</p>
        </div>
        <div class="instant-articles-card-step">
          <img src="/wp-content/plugins/facebook-instant-articles-wp/assets/connect@2x.png">
          <p>Sign up for Instant Articles and select your Facebook Page</p>
        </div>
        <div class="instant-articles-card-step">
          <img src="/wp-content/plugins/facebook-instant-articles-wp/assets/customize@2x.png">
          <p>Choose how you want your Instant Articles to look using the Style Editor</p>
        </div>
        <div class="instant-articles-card-step">
          <img src="/wp-content/plugins/facebook-instant-articles-wp/assets/check@2x.png">
          <p>Submit your Instant Articles for review and start publishing</p>
        </div>
      </div>
      <button class="instant-articles-button instant-articles-button-highlight instant-articles-button-centered">
        <label>Next</label>
      </button>
    </div>
  </div>
</div>


<div class="instant-articles-card-bullet-bar">
  <div class="instant-articles-card-bullet-step instant-articles-card-bullet-step-completed">
    <div class="instant-articles-card-bullet">✔</div>
    <div class="instant-articles-card-bullet-path"></div>
    <p>Enter Facebook App ID and connect to Facebook to Enable Plugin</p>
  </div>
  <div class="instant-articles-card-bullet-step instant-articles-card-bullet-step-completed">
    <div class="instant-articles-card-bullet">✔</div>
    <div class="instant-articles-card-bullet-path"></div>
    <p>Sign up for Instant Articles and select your Facebook Page</p>
  </div>
  <div class="instant-articles-card-bullet-step instant-articles-card-bullet-step-current">
    <div class="instant-articles-card-bullet"></div>
    <div class="instant-articles-card-bullet-path"></div>
    <p>Choose how you want your Instant Articles to look using the Style Editor</p>
  </div>
  <div class="instant-articles-card-bullet-step">
    <div class="instant-articles-card-bullet"></div>
    <p>Submit your Instant Articles for review and start publishing</p>
  </div>
</div>

<div class="instant-articles-card">
  <div class="instant-articles-card-title">
    <h3>Authenticate Plugin</h3>
    <div class="instant-articles-card-title-right">
      <span class="instant-articles-card-title-checkmark">✔</span>
      <label class="instant-articles-card-title-label">App connected:</label>
      <span class="instant-articles-card-title-value">1273677375983360</span>
      <a class="instant-articles-card-title-edit" href="#"></a>
      <span class="instant-articles-card-title-step">Step 1 of 2</span>
    </div>
  </div>
  <div class="instant-articles-card-content">
    <div class="instant-articles-card-content-box instant-articles-card-content-left">
      <label>Title of this section</label>
      <p>Yo dawg, you need a Facebook App to enable this plugin. It's for really cool security reasons. If you already know what I'm sayin' and have an App ID and App Secret, <a href="#">go here</a> to grab it. If you don't have any idea what's going on then go ahead and get an App ID already.</p>
      <button class="instant-articles-button">
        <label>Get App ID</label>
      </button>
    </div>
    <div class="instant-articles-card-content-box instant-articles-card-content-right">
      <label class="instant-articles-label">App ID</label>
      <input class="instant-articles-input-text"type="text"/>
      <label class="instant-articles-label">App Secret</label>
      <input class="instant-articles-input-text" type="password"/>
      <button class="instant-articles-button instant-articles-button-highlight instant-articles-button-disabled">
        <label>Submit</label>
      </button>
    </div>
  </div>
</div>

<div class="instant-articles-card">
  <div class="instant-articles-card-title">
    <h3>Authenticate Plugin</h3>
    <div class="instant-articles-card-title-right">
      <span class="instant-articles-card-title-checkmark">✔</span>
      <label class="instant-articles-card-title-label">App connected:</label>
      <span class="instant-articles-card-title-value">1273677375983360</span>
      <a class="instant-articles-card-title-edit" href="#"></a>
      <span class="instant-articles-card-title-step">Step 2 of 2</span>
    </div>
  </div>
  <div class="instant-articles-card-content">
    <div class="instant-articles-card-content-box instant-articles-card-content-full">
      <span class="instant-articles-card-title-checkmark">✔</span>
      <label class="instant-articles-card-title-label">App connected:</label>
      <span class="instant-articles-card-title-value">1273677375983360</span>
      <a class="instant-articles-card-title-edit" href="#"></a>
      <hr/>
      <label>Connect your Facebook Account</label>
      <p>Login with Facebook to finish activating the Instant Articles Plugin.</p>
      <button class="instant-articles-button">
        <span class="instant-articles-button-icon-facebook"></span>
        <label>Login with Facebook</label>
      </button>
    </div>
  </div>
</div>


<div class="instant-articles-card instant-articles-card-collapsed">
  <div class="instant-articles-card-title">
    <h3>Authenticate Plugin</h3>
    <div class="instant-articles-card-title-right">
      <span class="instant-articles-card-title-checkmark">✔</span>
      <label class="instant-articles-card-title-label">App connected:</label>
      <span class="instant-articles-card-title-value">1273677375983360</span>
      <a class="instant-articles-card-title-edit" href="#"></a>
      <span class="instant-articles-card-title-step">Step 1 of 2</span>
    </div>
  </div>
  <div class="instant-articles-card-content">
    <div class="instant-articles-card-content-box instant-articles-card-content-left">
      <label>Title of this section</label>
      <p>Yo dawg, you need a Facebook App to enable this plugin. It's for really cool security reasons. If you already know what I'm sayin' and have an App ID and App Secret, <a href="#">go here</a> to grab it. If you don't have any idea what's going on then go ahead and get an App ID already.</p>
      <button class="instant-articles-button">
        <label>Get App ID</label>
      </button>
    </div>
    <div class="instant-articles-card-content-box instant-articles-card-content-right">
      <label class="instant-articles-label">App ID</label>
      <input class="instant-articles-input-text"type="text"/>
      <label class="instant-articles-label">App Secret</label>
      <input class="instant-articles-input-text" type="text"/>
      <button class="instant-articles-button instant-articles-button-highlight instant-articles-button-disabled">
        <label>Submit</label>
      </button>
    </div>
  </div>
</div>

<div class="instant-articles-card">
  <div class="instant-articles-card-title">
    <h3>Select Facebook Page</h3>
  </div>
  <div class="instant-articles-card-content">
    <div class="instant-articles-card-content-box instant-articles-card-content-full">
      <p>Select the Facebook Page that you want to enable Instant Articles tools. Anyone with an admin role on that Page will also be able to access your Instant Articles tools.</p>
      <ul>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src=""/>
          <label>The Salty Shop</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src=""/>
          <label>The Sweet Shop</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src=""/>
          <label>Free Market street</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src="https://z-1-scontent-atl3-1.xx.fbcdn.net/v/t1.0-1/p160x160/943890_1119857341366295_1442705195804509998_n.jpg?oh=6e5a53e35daeb43b5f31f3d309dce08f&oe=582BADB5"/>
          <label>The mall</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src="https://z-1-scontent-atl3-1.xx.fbcdn.net/v/t1.0-1/p160x160/12400471_1021643444544180_2130580769920124493_n.png?oh=3018153ee4db69a4737cd96197691d7f&oe=582BE583"/>
          <label>Hilo CrossFit</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src=""/>
          <label>Street Dancer</label>
        </li>
      </ul>
      <button class="instant-articles-button instant-articles-button-highlight">
        <label>Select</label>
      </button>
    </div>
  </div>
</div>

<div class="instant-articles-card instant-articles-card-collapsed">
  <div class="instant-articles-card-title">
    <h3>Facebook Page Enabled</h3>
    <div class="instant-articles-card-title-right">
      <a href="" class="instant-articles-card-title-link">Hilo CrossFit</a>
      <img class="instant-articles-page-img" src=""/>
      <a class="instant-articles-card-title-edit" href="#"></a>
    </div>
  </div>
  <div class="instant-articles-card-content">
    <div class="instant-articles-card-content-box instant-articles-card-content-full">
      <p>Select the Facebook Page that you want to enable Instant Articles tools. Anyone with an admin role on that Page will also be able to access your Instant Articles tools.</p>
      <ul>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src=""/>
          <label>The Salty Shop</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src=""/>
          <label>The Sweet Shop</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src=""/>
          <label>Free Market street</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src="https://z-1-scontent-atl3-1.xx.fbcdn.net/v/t1.0-1/p160x160/943890_1119857341366295_1442705195804509998_n.jpg?oh=6e5a53e35daeb43b5f31f3d309dce08f&oe=582BADB5"/>
          <label>The mall</label>
        </li>
        <li class="instant-articles-radio-selected">
          <input type="radio" name="page-id" checked="checked"/>
          <img class="instant-articles-page-img" src="https://z-1-scontent-atl3-1.xx.fbcdn.net/v/t1.0-1/p160x160/12400471_1021643444544180_2130580769920124493_n.png?oh=3018153ee4db69a4737cd96197691d7f&oe=582BE583"/>
          <label>Hilo CrossFit</label>
        </li>
        <li>
          <input type="radio" name="page-id"/>
          <img class="instant-articles-page-img" src=""/>
          <label>Street Dancer</label>
        </li>
      </ul>
      <button class="instant-articles-button instant-articles-button-highlight">
        <label>Select</label>
      </button>
    </div>
  </div>
</div>

<div class="instant-articles-card">
  <div class="instant-articles-card-title">
    <h3>Style &amp; Preview Articles</h3>
  </div>
  <div class="instant-articles-card-content">
    <div class="instant-articles-card-content-box instant-articles-card-content-full">
      <p>Lorem ipsum dolor sit amet, consectetuer adipscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis notoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
      <button class="instant-articles-button">
        <label>Choose style</label>
      </button>
    </div>
  </div>
</div>

<div class="instant-articles-card instant-articles-card-collapsed">
  <div class="instant-articles-card-title">
    <h3>Style Selected</h3>
    <div class="instant-articles-card-title-right">
      <a href="" class="instant-articles-card-title-link">Sweet Shop Style 01</a>
      <a class="instant-articles-card-title-edit" href="#"></a>
    </div>
  </div>
</div>

<div class="instant-articles-card">
  <div class="instant-articles-card-title">
    <h3>Submit for Review</h3>
  </div>
  <div class="instant-articles-card-content">
    <div class="instant-articles-card-content-box instant-articles-card-content-full">
      <p>Lorem ipsum dolor sit amet, consectetuer adipscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis notoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
      <button class="instant-articles-button instant-articles-button-highlight">
        <label>Submit for Review</label>
      </button>
    </div>
  </div>
</div>

<a class="instant-articles-advanced-settings" href="#">► Advanced Settings</a>
