{{#zone "main"}}
<div class="container container-bg  white-bg">
        <div class=" margin-top-double">
            <div class="row row padding-top-double padding-bottom-double margin-bottom-double">
                <div class="col-lg-12  margin-top-double">
                    <h1 class="grey ">Fire Alarm</h1>
                    <hr>
                    <p  class="margin-bottom-double light-grey ">Connect your Fire Alarm device
                    to the WSO2 IoT server. </p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
                <img src="{{self.publicURL}}/images/firealarm.png" class="img-responsive">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
                    <h2 class="uppercase">Ingredients</h2>
                    <hr>
                    <p class="grey margin-top">Hardware Requirements </p>
                    <br>
                                <span class="fw-stack fw-lg margin-right">
                                    <i class="fw fw-ring fw-stack-2x"> </i>
                                    <i class="fw fw-right-arrow fw-stack-1x"></i>
                                </span>Raspberry Pi (Internet Enabled) 
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
                                <span class="fw-stack fw-lg margin-right">
                                    <i class="fw fw-ring fw-stack-2x"> </i>
                                    <i class="fw fw-right-arrow fw-stack-1x"></i>
                                </span>DHT11 Temperature Sensor<br/><br/>
				<span class="fw-stack fw-lg margin-right">
                                    <i class="fw fw-ring fw-stack-2x"> </i>
                                    <i class="fw fw-right-arrow fw-stack-1x"></i>
                                </span>LED
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="fw-stack fw-lg margin-right">
                                    <i class="fw fw-ring fw-stack-2x"> </i>
                                    <i class="fw fw-right-arrow fw-stack-1x"></i>
                                </span>Buzzer(3v)<br><br>
				<a href="#" class="download-link btn-operations" data-devicetype="firealarm" data-sketchtype="firealarm"><i class="fw fw-download"></i> Download</a>
                                <!--form method="POST" class="form-login-box float-left"
                                action="{{sketchPath}}">
                                    <input type="hidden" name="deviceType" value="firealarm" />
                                    <input type="hidden" name="sketchType" value="firealarm" />
									<button class="wr-btn margin-right" type="submit">Create
									Sketch
									for Ethernet</button>
								</form-->
                                <br/>

                </div>
                <div class ="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
                    <h2 class="uppercase">Prepare</h2><hr>
                    <p class="grey margin-top"><b>Get your device ready</b></p>
                         <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
                             <span class="circle">01  </span> <span class="padding-left"><b>Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</b></span>
                        </div>
                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom">
                        <span class="circle">02  </span> <span class="padding-left"><b>Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</b></span>
                    </div>
                    <div class="margin-doubles padding-top-double margin-bottom-double light-grey  margin-left-double margin-bottom">
                        <span class="circle">03  </span> <span class="padding-left"><b>Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</b></span>
                        </div>
                </div>
		<div class ="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
                    <h2 class="uppercase">Schematic Diagram</h2><hr>
                    <p class="grey margin-top">Click on the image to zoom</p>
                    <center>
                        <a href="{{self.publicURL}}/images/schematicsGuide.png" target="_blank">
                            <img src="{{self.publicURL}}/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px" />
                        </a>
                    </center>
                </div>
            </div>
            <div class="row row padding-top-double padding-bottom-double margin-bottom-double  ">
                <div class="col-lg-12  margin-top-double">
                    <h2 class="uppercase ">Connect (Quickstart)</h2>
                    <hr>
                    <p  class="margin-bottom-double light-grey ">Internet of Things Foundation Quickstart connection  </p>
<div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
    <span class="circle">01  </span> <span class="padding-left"><b>Click on the <i>"Create DEB"</i> button above to get the download link for the FireAlarm setup files</b></span><br>
</div>
<br>
<div>
    <span class="padding-left"><i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>"ssh"</b> login from a remote PC)</i></span> 
</div>
<div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
    <span class="circle">02  </span> <span class="padding-left"><b>Download the FireAlarm setup files using the following command: "curl -k &#60;url_link_received_from_the_above_step&#62; > Agent.zip"</b></span><br>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i> This will download a zip file named &#34;Agent.zip&#34;</i>
</div>
                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">

        <span class="circle">03  </span> <span class="padding-left"><b>Run the following commands to successfuly install the package and get the service running:</b></span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>&nbsp;&nbsp;cd &#60PATH_WHERE_THE_DOWNLOADED_&#34;Agent.zip&#34;_FILE_IS&#62 </b> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>unzip Agent.zip -d Agent</b> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>cd Agent</b> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>sudo chmod 755 startservice.sh</b> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>sudo ./startservice.sh</b> <br>

                    </div>


                    <div class="margin-doubles padding-top-double light-grey  margin-left-double margin-bottom ">
                        <span class="circle">04  </span> <span class="padding-left">Follow the installation instructions and complete installation. Upon completion the Agent would have started automatically</span><br>
                    </div>
                </div>
            </div>
        </div>

<div id="download-device-modal-content" class="hide">
        <div class="content">
            <div class="row">
                <div class="col-lg-5 col-md-6 col-centered">
                    <h3>Please download the file from following link.</h3>
                    <br/>
                    <div class="buttons">
                        <form method="POST" action="{{sketchPath}}">
                            <input type="hidden" name="deviceType" value="firealarm" />
                            <input type="hidden" name="sketchType" value="firealarm" />
                            <button class="btn-operations" type="submit" style="font-size: 13px;border:none;  padding: 10px 10px;  display: inline-block;  margin-right: 2px;  text-decoration: none;">Download Now</button>
                        &nbsp;&nbsp;
                        <a href="#" id="download-device-download-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;Copy Link&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                        &nbsp;&nbsp;
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="download-device-modal-content-links" class="hide">
        <div class="content">
            <div class="row">
                <div class="col-lg-5 col-md-6 col-centered">
                    <h3>Please download the file from following link(Press CTRL+C).</h3>
                    <br/>
                    <div>
                        <input id="download-device-url" style="color:#3f3f3f;padding:5px" type="text" value="" placeholder="Type here" size="60">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-400-content" class="hide">
        <div class="content">
            <div class="row">
                <div class="col-lg-5 col-md-6 col-centered">
                    <h3>Exception at backend. Try Later.</h3>
                    <div class="buttons">
                        <a href="#" id="device-400-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-403-content" class="hide">
        <div class="content">
            <div class="row">
                <div class="col-lg-5 col-md-6 col-centered">
                    <h3>Action not permitted.</h3>
                    <div class="buttons">
                        <a href="#" id="device-403-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-409-content" class="hide">
        <div class="content">
            <div class="row">
                <div class="col-lg-5 col-md-6 col-centered">
                    <h3>Device Sketch does not exist.</h3>
                    <div class="buttons">
                        <a href="#" id="device-409-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-unexpected-error-content" class="hide">
        <div class="content">
            <div class="row">
                <div class="col-lg-5 col-md-6 col-centered">
                    <h3>Unexpected error.</h3>
                    <div class="buttons">
                        <a href="#" id="device-unexpected-error-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

{{/zone}}
{{#zone  "topCss"}}
    <link href="{{self.publicURL}}/css/fontwso2.css" rel="stylesheet">
    <link href="{{self.publicURL}}/css/fontwso2-extend.css" rel="stylesheet">
{{/zone}}
{{#zone "bottomJs"}}
        <script src="{{self.publicURL}}/js/firealarm.js"></script>
{{/zone}}