<div class="modal-header bg-primary text-center text-white">
<div style="font-size: 62px">
<span class="c8y-icon c8y-icon-mobile-add"></span>
</div>
<h4 class="text-uppercase m-0" style="letter-spacing: 0.15em" translate>Connect smartphone</h4>
</div>
<c8y-stepper
[disableDefaultIcons]="{ edit: true }"
[customClasses]="['m-l-80', 'm-r-80', 'p-t-16 ', 'p-b-16']"
linear
>
<cdk-step>
<div class="p-l-24 p-r-24">
<h4 class="text-center m-b-24 animated fadeInDown" style="animation-delay: 0.3s" translate>
Connect your smartphone to our IoT platform
</h4>
<div class="row overflow-hidden">
<div class="col-xs-5">
<p class="m-b-16 lead animated fadeInUp" style="animation-delay: 0.5s" translate>
Using your smartphone as a source of sensor data is a quick way to start using our IoT
platform.
</p>
<p class="m-b-16 animated fadeInUp" style="animation-delay: 0.7s" translate>
Use this wizard to connect your smartphone to our IoT platform using the Cumulocity IoT
Sensor App.
</p>
<p class="m-b-16 animated fadeInUp" style="animation-delay: 0.9s" translate>
We don't collect any personal data. The only data we retrieve from your phone is sensor
data and anonymized app usage data.
</p>
<p class="m-b-16 animated fadeInUp" style="animation-delay: 1.1s">
<span translate>Take your phone and click <strong>Next</strong>.</span>
</p>
</div>
<div class="col-xs-7 no-gutter animated fadeInUp" style="animation-delay: 0.3s">
<svg viewBox="0 0 326 362">
<style type="text/css">
.st12,
.st13 {
fill-rule: evenodd;
clip-rule: evenodd;
}
.st2 {
fill: #fff;
}
.st2,
.st6,
.st7,
.st8 {
fill-rule: evenodd;
clip-rule: evenodd;
}
.st6 {
fill: #d89e66;
}
.st7 {
fill: #2a2b2a;
}
.st8 {
fill: #373737;
}
.st12 {
fill: #f4be84;
}
.st13 {
fill: #ffe5cc;
}
</style>
<g>
<linearGradient
id="SVGID_1_"
gradientUnits="userSpaceOnUse"
x1="-133.0887"
y1="601.1531"
x2="-133.0887"
y2="600.1531"
gradientTransform="matrix(325.8 0 0 -325.8 43523.1992 195855.6719)"
>
<stop offset="0" style="stop-color: #b5eb45" />
<stop offset="1" style="stop-color: #61aa11" />
</linearGradient>
<circle
cx="162.9"
cy="162.9"
r="162.9"
style="fill-rule: evenodd; clip-rule: evenodd; fill: url(#SVGID_1_)"
/>
<g transform="translate(62.053 48.28)">
<g transform="translate(55.31 78.12)">
<defs>
<filter
id="Adobe_OpacityMaskFilter"
filterUnits="userSpaceOnUse"
x="0"
y="36.1"
width="70.4"
height="199.5"
>
<feColorMatrix
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
/>
</filter>
</defs>
<mask
maskUnits="userSpaceOnUse"
x="0"
y="36.1"
width="70.4"
height="199.5"
id="connect-smartphone-c_2_"
>
<g style="filter: url(#Adobe_OpacityMaskFilter)">
<polygon
id="connect-smartphone-b_2_"
class="st2"
points="0,201.4 70.4,201.4 70.4,0.1 0,0.1 "
/>
</g>
</mask>
<path
d="M0,235.6V36.1l70.4,0v199.5H0z"
style="
mask: url(#connect-smartphone-c_2_);
fill-rule: evenodd;
clip-rule: evenodd;
fill: #f4be84;
"
/>
</g>
<g transform="translate(55.31 126)">
<defs>
<filter
id="Adobe_OpacityMaskFilter_1_"
filterUnits="userSpaceOnUse"
x="0.1"
y="20.1"
width="22.2"
height="167.7"
>
<feColorMatrix
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
/>
</filter>
</defs>
<mask
maskUnits="userSpaceOnUse"
x="0.1"
y="20.1"
width="22.2"
height="167.7"
id="connect-smartphone-e_2_"
>
<g style="filter: url(#Adobe_OpacityMaskFilter_1_)">
<polygon
id="connect-smartphone-d_2_"
class="st2"
points="0.1,153.5 22.3,153.5 22.3,0.3 0.1,0.3 "
/>
</g>
</mask>
<path
d="M20,187.7l2.3-167.7H0.1v167.7H20z"
style="
mask: url(#connect-smartphone-e_2_);
fill-rule: evenodd;
clip-rule: evenodd;
fill: #d89e66;
"
/>
</g>
<path
class="st6"
d="M70.3,110.9c-2.8,0-5.2-1.3-7.3-3.4L38.6,83.1c-4.2-4.2-4.7-10.5-0.5-14.7c4.2-4.2,10.5-3.7,14.7,0.5
l24.3,24.3c4.2,4.2,4.6,10.6,0.4,14.8C75.4,110.2,73,110.9,70.3,110.9 M90,93.2c-2.9,0-5.9-0.9-8.1-3.1L59.4,64.3
C57.8,62.6,53.6,53,58,48.6c4.4-4.4,10.3-4.4,14.7,0L98,74c4.4,4.4,4.3,11.5,0,15.9C95.8,92.1,92.9,93.2,90,93.2"
/>
<path
class="st7"
d="M126.5,6.2L4.2,127.3c-5.7,5.6-5.7,14.7,0,20.3l47.3,46.8c5.7,5.6,14.9,5.6,20.5,0l122.3-121
c5.7-5.6,5.7-14.7,0-20.3L147.1,6.3C141.4,0.6,132.2,0.6,126.5,6.2"
/>
<path
class="st6"
d="M125.4,47.9c-2.7,0-5.2-1.3-7.3-3.4L93.8,20.3c-4.2-4.2-4.5-10.6-0.4-14.8c4.2-4.2,10.6-3.8,14.8,0.4
L132.5,30c4.2,4.2,4.4,10.7,0.2,14.9C130.6,47.1,128.1,47.9,125.4,47.9"
/>
<path
class="st8"
d="M129.1,4.2L6.8,125.2c-5.7,5.6-5.7,14.7,0,20.3L54,192.3c5.7,5.6,14.9,5.6,20.5,0l122.3-121
c5.7-5.6,5.7-14.7,0-20.3L149.6,4.2C143.9-1.4,134.7-1.4,129.1,4.2"
/>
<path
class="st7"
d="M50.3,157.5c0,4.9-3.9,8.8-8.8,8.8s-8.8-3.9-8.8-8.8c0-4.9,3.9-8.8,8.8-8.8S50.3,152.6,50.3,157.5
M185.2,38.1c-0.5-0.5-1.2-0.5-1.7,0l12.2,12.3c0.5-0.5,0.5-1.2,0-1.7L185.2,38.1z M120.7,12.9c-0.5-0.5-1.2-0.5-1.6,0l-5.6,5.6
c-0.5,0.5-0.5,1.2,0,1.6L120.7,12.9z M166.7,34.5c1,1,2.6,1,3.6,0c1-1,1-2.6,0-3.6c-1-1-2.6-1-3.6,0
C165.7,32,165.7,33.6,166.7,34.5"
/>
<path
d="M80.5,176.3c0,0-57.9-55.6-57.8-55.7L125.3,15.2c0.1-0.1,0.3-0.1,0.4,0l59.1,57L80.5,176.3z"
style="fill-rule: evenodd; clip-rule: evenodd; fill: #1776bf"
/>
<polygon
points="29.2,113.7 22.7,120.6 80.5,176.3 87.2,170 "
style="fill-rule: evenodd; clip-rule: evenodd; fill: #176878"
/>
<path
d="M176.8,80.2l7.9-8l-59.5-57.4c-0.1-0.1-0.3-0.1-0.4,0l-7.9,7.6L176.8,80.2z"
style="fill-rule: evenodd; clip-rule: evenodd; fill: #394852"
/>
<path
class="st12"
d="M189.7,84.5l0.1-0.1l11.3,9l-20.6,21.3l-2.1,2.6c-4.7,5.8-11.4,14-14.6,17.2c-6.1,6.2-10.8,23.2-18.6,31.9
L141,171c-8.9,9.8-15.9,19-16.1,41.8l0,0.8c0,23.1-8.7,2.5-11.2-3.7l-0.6-1.6l3.3-32.5l-5.6,11.5l-33.8,5.3v-0.4
c0-3.1,0.7-22.6,13.8-35.5c11.1-10.9,29.9-17.1,42.3-24.8l0.2-0.2l0,0l45.6-45.9C182,82.8,186.4,82.4,189.7,84.5z M58.2,80.1
c-1.9-1.9-2.6-4.5-2.6-7.4l-0.3-16.9c0-5.8,4.2-10.5,9.9-10.5c5.7,0,9.9,4.7,9.9,10.5l0.3,16.9c0,5.8-4.4,10.5-10.1,10.5
C62.5,83.2,60.1,82,58.2,80.1"
/>
<path
class="st13"
d="M73.4,72.5l0-2.5h-15l0,2.5c0,2.1,0.6,4,2,5.4s3.2,2.2,5.4,2.2C70.1,80.1,73.4,76.7,73.4,72.5"
/>
<path
class="st12"
d="M78.4,57.4c-1.9-1.9-2.6-4.5-2.6-7.4l-0.3-16.9c0-5.8,4.2-10.5,9.9-10.5c5.7,0,9.9,4.7,9.9,10.5L95.5,50
c0,5.8-4.4,10.5-10.1,10.5C82.6,60.5,80.2,59.3,78.4,57.4"
/>
<path
class="st13"
d="M93.5,50.3l0-2.4h-15l0,2.4c0,2.1,0.6,4,2,5.4c1.4,1.4,3.2,2.3,5.4,2.3C90.2,58,93.5,54.5,93.5,50.3"
/>
<path
class="st12"
d="M38.1,100.3c-1.9-1.9-2.6-4.5-2.6-7.4L35.2,76c0-5.8,4.2-10.5,9.9-10.5c5.7,0,9.9,4.7,9.9,10.5l0.3,16.9
c0,5.8-4.4,10.5-10.1,10.5C42.4,103.3,40,102.1,38.1,100.3"
/>
<path
class="st13"
d="M52.8,93.1l0-2.4h-15l0,2.4c0,2.1,0.6,4,2,5.4c1.4,1.4,3.2,2.3,5.4,2.3C49.5,100.8,52.8,97.4,52.8,93.1
M198.6,97.9c-2.8-2.8-7.4-3-10.4,0.1l-4.7,5.1l5.1,5.3L198.6,97.9z"
/>
<polygon class="st8" points="126.4,313.7 126.4,227.1 49.1,227.1 49.1,313.7 " />
<path
class="st12"
d="M93.4,37.3c-1.9-1.9-2.6-4.5-2.6-7.4L90.5,13c0-5.8,4.2-10.5,9.9-10.5c5.7,0,9.9,4.7,9.9,10.5l0.3,16.9
c0,5.8-4.4,10.5-10.1,10.5C97.7,40.3,95.3,39.1,93.4,37.3"
/>
<path
class="st13"
d="M108.6,30.1l0-2.4h-15l0,2.4c0,2.1,0.6,4,2,5.4c1.4,1.4,3.2,2.3,5.4,2.3C105.3,37.8,108.6,34.4,108.6,30.1"
/>
</g>
</g>
</svg>
</div>
</div>
</div>
<c8y-stepper-buttons (onNext)="next()" (onCancel)="cancel()" class="modal-footer separator"></c8y-stepper-buttons>
</cdk-step>
<cdk-step>
<div class="p-l-24 p-r-24">
<div>
<h4 class="text-center m-b-8 animated fadeInDown" style="animation-delay: 0.3s" translate>
Install Cumulocity IoT Sensor App
</h4>
<div class="text-center animated fadeInUp" style="animation-delay: 0.4s">
<p translate>
Open <strong>Google Play Store</strong> or <strong>Apple App Store</strong> on your
smartphone.
</p>
<p translate>Find and install <strong>Cumulocity IoT Sensor App</strong>.</p>
</div>
<div
class="center-block p-t-24 animated fadeInUp"
style="width: 181px; animation-delay: 0.5s"
>
<svg viewBox="0 0 167 167">
<defs>
<linearGradient id="sensorapp-icon-c" x1="50%" x2="50%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#33AEE1" />
<stop offset="100%" stop-color="#1776BF" />
</linearGradient>
<rect id="sensorapp-icon-b" width="102.4" height="102.4" x="0" y="0" rx="12" />
<filter
id="sensorapp-icon-a"
width="225%"
height="225%"
x="-62.5%"
y="-31.2%"
filterUnits="objectBoundingBox"
>
<feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur
in="shadowOffsetOuter1"
result="shadowBlurOuter1"
stdDeviation="2"
/>
<feColorMatrix
in="shadowBlurOuter1"
result="shadowMatrixOuter1"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter2" />
<feGaussianBlur
in="shadowOffsetOuter2"
result="shadowBlurOuter2"
stdDeviation="4"
/>
<feColorMatrix
in="shadowBlurOuter2"
result="shadowMatrixOuter2"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"
/>
<feOffset dy="16" in="SourceAlpha" result="shadowOffsetOuter3" />
<feGaussianBlur
in="shadowOffsetOuter3"
result="shadowBlurOuter3"
stdDeviation="8"
/>
<feColorMatrix
in="shadowBlurOuter3"
result="shadowMatrixOuter3"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"
/>
<feOffset dy="32" in="SourceAlpha" result="shadowOffsetOuter4" />
<feGaussianBlur
in="shadowOffsetOuter4"
result="shadowBlurOuter4"
stdDeviation="16"
/>
<feColorMatrix
in="shadowBlurOuter4"
result="shadowMatrixOuter4"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
/>
<feMerge>
<feMergeNode in="shadowMatrixOuter1" />
<feMergeNode in="shadowMatrixOuter2" />
<feMergeNode in="shadowMatrixOuter3" />
<feMergeNode in="shadowMatrixOuter4" />
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(32)">
<use fill="#000" filter="url(#sensorapp-icon-a)" xlink:href="#sensorapp-icon-b" />
<use fill="url(#sensorapp-icon-c)" xlink:href="#sensorapp-icon-b" />
<path
fill="#FFF"
fill-rule="nonzero"
d="M51.5,49.3L51.5,49.3c2.6,0,5,0.5,7.2,1.6c1.4,0.7,2.8,1.7,4,2.8l3.4-3.2c-1.8-1.7-3.7-3.1-5.9-4c-2.6-1.2-5.5-1.8-8.6-1.8h0c-2.1,0-4.2,0.3-6.1,0.8c-3.1,0.9-5.9,2.6-8.4,4.9l3.4,3.2c1.6-1.5,3.4-2.7,5.3-3.4C47.5,49.6,49.4,49.3,51.5,49.3z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M51.5,58L51.5,58c1.9,0,3.5,0.6,4.9,1.6h0c0.2,0.2,0.5,0.4,0.7,0.6l3.4-3.4l0,0h0c-0.8-0.8-1.6-1.4-2.5-1.9v0c-1.9-1.1-4.1-1.7-6.5-1.7h0c-2.3,0-4.4,0.5-6.3,1.6v0c-1,0.5-1.8,1.2-2.7,2c0,0,0,0,0,0l3.4,3.4C47.5,58.8,49.3,58,51.5,58z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M51.6,61.8L51.6,61.8c-1.1,0-2.1,0.4-2.8,1.2l0,0c-0.8,0.8-1.2,1.7-1.2,2.8c0,1.1,0.4,2,1.2,2.8c0,0,0,0,0,0c0.8,0.8,1.7,1.2,2.8,1.2c0,0,0,0,0,0c1.1,0,2-0.4,2.8-1.2l0,0c0.8-0.8,1.2-1.7,1.2-2.8c0-1.1-0.4-2-1.2-2.8c0,0,0,0,0,0C53.7,62.1,52.7,61.8,51.6,61.8z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M51,78.2c0.2,0,0.3,0,0.5,0c0,0,0,0,0,0c3.5,0,6.5-1.2,9-3.6l0,0l-3.4-3.4c0,0,0,0,0,0c-1.4,1.3-3,2.1-4.8,2.2h0c-0.2,0-0.5,0-0.7,0c0,0,0,0,0,0c-2.2,0-4-0.7-5.6-2.2l-3.4,3.4C44.9,76.9,47.7,78.1,51,78.2z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M62.6,77.8c-3.1,3-6.8,4.4-11.1,4.4c-0.5,0-1.1,0-1.6-0.1c-3.7-0.3-6.9-1.8-9.5-4.4L37,81c3.3,3.2,7.2,5.1,11.7,5.6c0.9,0.1,1.9,0.2,2.8,0.2c5.7,0,10.5-1.9,14.5-5.8l0,0L62.6,77.8L62.6,77.8z"
/>
<path
fill="#FFF"
fill-rule="nonzero"
d="M81,38.5C78.7,32.4,72.7,28,65.8,28c-1.6,0-3.1,0.2-4.6,0.7C57.2,22.3,50.1,18,42,18c-12.3,0-22.2,9.8-22.5,22C15,42.6,12,47.5,12,53c0,8.3,6.7,15,15,15h17.4c-0.7-1.6-0.9-3,0-5H27c-5.5,0-10-4.5-10-10c0-4.7,3.3-8.7,7.7-9.7c-0.1-0.9-0.2-1.8-0.2-2.8C24.5,30.8,32.3,23,42,23c7.9,0,14.6,5.2,16.8,12.4c1.9-1.5,4.4-2.4,7-2.4c5.8,0,10.6,4.4,11.2,10H77c5.5,0,10,4.5,10,10c0,5.5-4.5,10-10,10H58.7c0.8,1.5,0.7,3.4,0,5H77c8.3,0,15-6.7,15-15C92,46.1,87.3,40.3,81,38.5z"
/>
<text
fill="#58656D"
font-family="Roboto-Medium, Roboto"
font-size="14"
font-weight="400"
>
<tspan x="4.681" y="124.7">Cumulocity IoT</tspan>
<tspan x="15.197" y="140.7">Sensor App</tspan>
</text>
</g>
</svg>
</div>
</div>
<div class="row overflow-hidden">
<div class="col-xs-6">
<div class="p-24">
<a
href="https://play.google.com/store/apps/details?id=com.softwareag.cumulocity.iotcloudsensor"
class="center-block animated fadeInLeft"
style="width: 171px; animation-delay: 0.35s"
>
<svg viewBox="0 0 171 52">
<g fill="none" fill-rule="evenodd">
<rect width="170.4" height="51.2" fill="#000" rx="8" />
<path
fill="#FFF"
fill-rule="nonzero"
d="M85.2480681,31.4279551 C82.5352946,31.4279551 80.324619,33.4905299 80.324619,36.3333431 C80.324619,39.1580952 82.5352946,41.2387311 85.2480681,41.2387311 C87.9608415,41.2387311 90.1715171,39.1580952 90.1715171,36.3333431 C90.1715171,33.4905299 87.9596375,31.4279551 85.2480681,31.4279551 Z M85.2480681,39.3061961 C83.7622436,39.3061961 82.4799073,38.0804511 82.4799073,36.3333431 C82.4799073,34.568174 83.7622436,33.3604901 85.2480681,33.3604901 C86.7338925,33.3604901 88.0162288,34.568174 88.0162288,36.3333431 C88.0162288,38.0804511 86.7338925,39.3061961 85.2480681,39.3061961 Z M74.5065447,31.4279551 C71.7937712,31.4279551 69.5830956,33.4905299 69.5830956,36.3333431 C69.5830956,39.1580952 71.7937712,41.2387311 74.5065447,41.2387311 C77.2193181,41.2387311 79.4299937,39.1580952 79.4299937,36.3333431 C79.4299937,33.4905299 77.2193181,31.4279551 74.5065447,31.4279551 Z M74.5065447,39.3061961 C73.0195161,39.3061961 71.7383839,38.0804511 71.7383839,36.3333431 C71.7383839,34.568174 73.0207202,33.3604901 74.5065447,33.3604901 C75.9923691,33.3604901 77.2747054,34.568174 77.2747054,36.3333431 C77.2747054,38.0804511 75.9923691,39.3061961 74.5065447,39.3061961 Z M61.7289361,32.9330447 L61.7289361,35.0136805 L66.7089765,35.0136805 C66.5596716,36.1840382 66.1695524,37.0389291 65.5759451,37.6337405 C64.8510939,38.3585917 63.7180625,39.1568912 61.7301401,39.1568912 C58.6645737,39.1568912 56.267267,36.6861361 56.267267,33.6193655 C56.267267,30.552595 58.6645737,28.0818399 61.7301401,28.0818399 C63.3833305,28.0818399 64.5922185,28.7320386 65.4832315,29.5676644 L66.9509949,28.099901 C65.7059848,26.9102782 64.0527944,26 61.7301401,26 C57.5303381,26 54,29.4183595 54,33.6181615 C54,37.8179635 57.5303381,41.236323 61.7301401,41.236323 C63.9974071,41.236323 65.7059848,40.4934107 67.0437084,39.0990957 C68.4187583,37.7240459 68.8462037,35.7915108 68.8462037,34.231034 C68.8462037,33.7482012 68.8088775,33.3014906 68.7342251,32.9306366 L61.7289361,32.9306366 L61.7289361,32.9330447 Z M113.984443,34.550113 C113.576262,33.4544077 112.331252,31.4291592 109.784641,31.4291592 C107.257294,31.4291592 105.158597,33.4170815 105.158597,36.3345472 C105.158597,39.0846469 107.239233,41.2399352 110.026659,41.2399352 C112.274661,41.2399352 113.575058,39.8648853 114.114482,39.0665858 L112.442027,37.9516154 C111.884542,38.7691801 111.122364,39.3074001 110.026659,39.3074001 C108.92975,39.3074001 108.149511,38.8053022 107.648617,37.8215757 L114.207196,35.1088022 L113.984443,34.550113 Z M107.29462,36.1852423 C107.239233,34.2900335 108.762384,33.324368 109.858089,33.324368 C110.71298,33.324368 111.437831,33.7518134 111.678645,34.3646859 L107.29462,36.1852423 Z M101.961787,40.9413254 L104.117075,40.9413254 L104.117075,26.5225671 L101.961787,26.5225671 L101.961787,40.9413254 Z M98.4314488,32.5248644 L98.3567964,32.5248644 C97.8739636,31.9493181 96.9444203,31.4291592 95.7740626,31.4291592 C93.3213686,31.4291592 91.0733668,33.5844475 91.0733668,36.3526082 C91.0733668,39.1027079 93.3213686,41.2399352 95.7740626,41.2399352 C96.9444203,41.2399352 97.8739636,40.7197762 98.3567964,40.1249648 L98.4314488,40.1249648 L98.4314488,40.8305508 C98.4314488,42.7076985 97.4284571,43.7106902 95.8113888,43.7106902 C94.4917263,43.7106902 93.6741616,42.7630858 93.3406338,41.9635822 L91.463486,42.7438207 C92.0029101,44.0442181 93.4333473,45.6420212 95.8113888,45.6420212 C98.3387353,45.6420212 100.474758,44.1561968 100.474758,40.531941 L100.474758,31.7241567 L98.4302447,31.7241567 L98.4302447,32.5248644 L98.4314488,32.5248644 Z M95.9606937,39.3061961 C94.4748693,39.3061961 93.2298592,38.0611859 93.2298592,36.3514042 C93.2298592,34.6235613 94.4748693,33.3604901 95.9606937,33.3604901 C97.4284571,33.3604901 98.5807537,34.6235613 98.5807537,36.3514042 C98.5807537,38.0611859 97.4284571,39.3061961 95.9606937,39.3061961 Z M124.080584,26.5225671 L118.923545,26.5225671 L118.923545,40.9413254 L121.075221,40.9413254 L121.075221,35.4784522 L124.080584,35.4784522 C126.46585,35.4784522 128.810177,33.7518134 128.810177,31.0005097 C128.810177,28.25041 126.46585,26.5225671 124.080584,26.5225671 Z M124.135971,33.4724688 L121.075221,33.4724688 L121.075221,28.5297546 L124.135971,28.5297546 C125.744611,28.5297546 126.658501,29.8614579 126.658501,31.0005097 C126.658501,32.1178882 125.744611,33.4724688 124.135971,33.4724688 Z M137.436147,31.4014655 C135.878078,31.4014655 134.264622,32.0877864 133.596362,33.6085289 L135.507224,34.4056243 C135.915404,33.6085289 136.675173,33.3484494 137.473473,33.3484494 C138.586035,33.3484494 139.717862,34.0167092 139.737128,35.2039239 L139.737128,35.3520247 C139.347008,35.1292714 138.512587,34.7957436 137.492738,34.7957436 C135.433775,34.7957436 133.337487,35.9275709 133.337487,38.0419208 C133.337487,39.9708436 135.025595,41.2134456 136.917192,41.2134456 C138.364486,41.2134456 139.161581,40.564451 139.662475,39.8034777 L139.737128,39.8034777 L139.737128,40.9160399 L141.814151,40.9160399 L141.814151,35.3881468 C141.812947,32.8294945 139.902085,31.4014655 137.436147,31.4014655 Z M137.176067,39.3037879 C136.471685,39.3037879 135.487959,38.9509949 135.487959,38.079247 C135.487959,36.9666848 136.7125,36.5392394 137.769674,36.5392394 C138.716075,36.5392394 139.160377,36.7439315 139.735923,37.0220721 C139.568558,38.3573876 138.418669,39.3037879 137.176067,39.3037879 Z M149.381742,31.7169323 L146.914599,37.9684724 L146.839946,37.9684724 L144.28009,31.7169323 L141.961048,31.7169323 L145.800833,40.4536764 L143.61183,45.3133096 L145.85622,45.3133096 L151.773028,31.7169323 L149.381742,31.7169323 Z M129.997392,40.9413254 L132.149068,40.9413254 L132.149068,26.5225671 L129.997392,26.5225671 L129.997392,40.9413254 Z"
/>
<text
fill="#FFF"
font-family="Roboto-Regular, Roboto"
font-size="12"
letter-spacing=".96"
>
<tspan x="55.142" y="17.4" translate>Download on the`Google Play`</tspan>
</text>
<path
fill="#FFF"
fill-rule="nonzero"
d="M12.7999992,39.4109698 L12.7999992,11.7922439 C12.7999992,10.8284641 13.3587517,9.99536961 14.1695974,9.59999943 L30.1457109,25.5968954 L14.1631721,41.5999975 C13.3557986,41.2034251 12.7999992,40.3722639 12.7999992,39.4109698 Z M35.2141861,30.6717551 L17.745324,40.770461 L31.5225942,26.9753948 L35.2141861,30.6717551 Z M40.6441621,23.6653717 C41.2251919,24.1106831 41.5999975,24.8123612 41.5999975,25.6016069 C41.5999975,26.3789928 41.2365497,27.071248 40.6704472,27.5173717 L36.9598716,29.6625343 L32.8993152,25.5968954 L36.9571133,21.5338234 L40.6441621,23.6653717 Z M17.7555622,10.4335163 L35.2114278,20.5246677 L31.5225942,24.2182336 L17.7555622,10.4335163 Z"
/>
</g>
</svg>
</a>
</div>
</div>
<div class="col-xs-6">
<div class="p-24">
<a
href="http://onelink.to/g39r8w"
class="center-block animated fadeInRight"
style="width: 171px; animation-delay: 0.35s"
>
<svg viewBox="0 0 171 52">
<g fill="none" fill-rule="evenodd">
<rect width="170.4" height="51.2" fill="#000" rx="8" />
<text fill="#FFF" font-family="Helvetica" font-size="12" letter-spacing=".96">
<tspan x="54.4" y="17.4" translate>Download on the`App Store`</tspan>
</text>
<text fill="#FFF" font-family="Helvetica" font-size="23.2">
<tspan x="54.4" y="41.4">App Store</tspan>
</text>
<path
fill="#FFF"
fill-rule="nonzero"
d="M38.5273755,38.1636701 C37.1235711,40.207449 35.6714645,42.2386565 33.378798,42.2812318 C31.1224426,42.323807 30.3990915,40.9506718 27.8243806,40.9506718 C25.2469674,40.9506718 24.4406919,42.2386565 22.3103107,42.323807 C20.0969712,42.4062756 18.4139767,40.1164319 16.9986034,38.081872 C14.10704,33.9219027 11.9000846,26.3195413 14.8682053,21.1890243 C16.3380115,18.6410976 18.9717322,17.0290047 21.8257685,16.9864462 C23.9993852,16.9466199 26.0527362,18.4453856 27.3803717,18.4453856 C28.7100338,18.4453856 31.202327,16.6459449 33.8224691,16.9098778 C34.9192335,16.9549841 37.9974022,17.3498611 39.9742465,20.2297237 C39.8180243,20.3319546 36.3000689,22.3695987 36.3429667,26.6147184 C36.3860334,31.6856972 40.806362,33.3712742 40.8577042,33.394238 C40.8176776,33.5134151 40.1510732,35.8005769 38.5273755,38.1636701 Z M28.9012161,11.3393106 C30.1146826,9.92365046 32.1649936,8.87068442 33.8570913,8.79993243 C34.0732691,10.7663552 33.2786469,12.7354933 32.1050381,14.154422 C30.9290648,15.5708029 29.0040694,16.6741384 27.1148784,16.5268181 C26.8581673,14.6029538 27.8103628,12.5965204 28.9012161,11.3393106 Z"
/>
</g>
</svg>
</a>
</div>
</div>
</div>
<p class="text-center p-b-24 animated fadeIn" style="animation-delay: 1s" translate>
Click <strong>Next</strong> once you have the app installed.
</p>
</div>
<c8y-stepper-buttons (onBack)="back()" (onNext)="next()" (onCancel)="cancel()" class="modal-footer separator"></c8y-stepper-buttons>
</cdk-step>
<cdk-step>
<div class="p-l-24 p-r-24">
<h4 class="text-center m-b-8 animated fadeInDown" style="animation-delay: 0.3s" translate>
You have two options to connect your smartphone.
</h4>
<div class="row">
<div class="col-xs-6">
<div class="animated fadeInUp" style="animation-delay: 0.35s">
<p class="text-info" translate>Option 1: QR code scan</p>
<p translate>Press <strong>Scan QR code</strong> and use the code below.</p>
</div>
<div class="row overflow-hidden">
<qrcode
*ngIf="registrationData"
class="center-block animated fadeInUp"
style="animation-delay: 0.75s"
[qrdata]="registrationData"
[width]="288"
[errorCorrectionLevel]="'M'"
></qrcode>
</div>
</div>
<div class="col-xs-6">
<div class="animated fadeInUp" style="animation-delay: 0.55s">
<p class="text-info" translate>Option 2: Manual registration</p>
<p translate>
Press <strong>Manual registration</strong> and enter the following data in your
smartphone.
</p>
</div>
<div class="m-t-16 overflow-hidden">
<svg class="animated fadeInUp" style="animation-delay: 0.95s" viewBox="0 0 257 305">
<defs>
<rect id="login-screen-a" width="255" height="306" x="0" y="0" />
<polygon
id="login-screen-c"
points="6.898 5.644 55.186 5.644 55.186 8.153 6.898 8.153"
/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="login-screen-b" fill="#fff">
<use xlink:href="#login-screen-a" />
</mask>
<g mask="url(#login-screen-b)">
<g transform="translate(2)">
<path
fill="#FFF"
stroke="#CCCDC9"
stroke-width="1.817"
d="M7.38308195,146.47702 L4.61442622,146.47702 C3.09169154,146.47702 1.71398319,147.082069 0.716388292,148.057604 C-0.288641051,149.04041 -0.908444414,150.39865 -0.908444414,151.897853 L-0.908444414,183.448832 C-0.908444414,184.948035 -0.288641051,186.306275 0.716388292,187.28908 C1.71398319,188.264616 3.09169154,188.869665 4.61442622,188.869665 L7.38308195,188.869665 C8.90581663,188.869665 10.283525,188.264616 11.2811199,187.28908 C12.2861492,186.306275 12.9059526,184.948035 12.9059526,183.448832 L12.9059526,151.897853 C12.9059526,150.39865 12.2861492,149.04041 11.2811199,148.057604 C10.283525,147.082069 8.90581663,146.47702 7.38308195,146.47702 Z M253.455992,117.439118 C253.455992,116.57847 253.289564,115.89251 253.006875,115.340103 C252.679825,114.701009 252.195532,114.225904 251.57447,113.879494 C250.346479,113.194557 248.492308,113.061843 246.328777,113.062082 C244.332904,113.06945 242.585176,113.229114 241.417948,113.929711 C240.344603,114.573957 239.641595,115.621252 239.641595,117.439118 L239.641595,171.364789 C239.641595,172.225436 239.808022,172.911396 240.090711,173.463804 C240.417761,174.102898 240.902054,174.578002 241.523116,174.924413 C242.751108,175.60935 244.605278,175.742063 246.768809,175.741825 C248.764682,175.734456 250.51241,175.574793 251.679638,174.874196 C252.752983,174.229949 253.455992,173.182654 253.455992,171.364789 L253.455992,117.439118 Z M7.38308195,98.7408374 L4.61442622,98.7408374 C3.09168636,98.7408374 1.71397154,99.3459143 0.71637263,100.321501 C-0.288644505,101.304341 -0.908444414,102.66263 -0.908444414,104.161888 L-0.908444414,136.905836 C-0.908444414,138.405094 -0.288644505,139.763382 0.71637263,140.746223 C1.71397154,141.721809 3.09168636,142.326886 4.61442622,142.326886 L7.38308195,142.326886 C8.90582182,142.326886 10.2835366,141.721809 11.2811355,140.746223 C12.2861527,139.763382 12.9059526,138.405094 12.9059526,136.905836 L12.9059526,104.161888 C12.9059526,102.66263 12.2861527,101.304341 11.2811355,100.321501 C10.2835366,99.3459143 8.90582182,98.7408374 7.38308195,98.7408374 Z M10.1517377,64.1321048 L1.84577049,64.1321048 C1.08690926,64.1321048 0.400524723,64.4358637 -0.0965613404,64.9250099 C-0.598984265,65.4194076 -0.908444414,66.1027717 -0.908444414,66.8568372 L-0.908444414,83.5121388 C-0.908444414,84.2662044 -0.598984265,84.9495685 -0.0965613404,85.4439662 C0.400524723,85.9331124 1.08690926,86.2368713 1.84577049,86.2368713 L10.1517377,86.2368713 C10.9105989,86.2368713 11.5969835,85.9331124 12.0940695,85.4439662 C12.5964924,84.9495685 12.9059526,84.2662044 12.9059526,83.5121388 L12.9059526,66.8568372 C12.9059526,66.1027717 12.5964924,65.4194076 12.0940695,64.9250099 C11.5969835,64.4358637 10.9105989,64.1321048 10.1517377,64.1321048 Z"
/>
<path
fill="#394852"
d="M33.5930229,0 L218.954524,0 C236.513532,0 250.747921,14.1590938 250.747921,31.6252212 L250.747921,474.378317 C250.747921,491.844445 236.513532,506.003539 218.954524,506.003539 L33.5930229,506.003539 C16.0340148,506.003539 1.79962623,491.844445 1.79962623,474.378317 L1.79962623,31.6252212 C1.79962623,14.1590938 16.0340148,0 33.5930229,0 Z"
/>
<path
fill="#FFF"
stroke="#CCCDC9"
stroke-width="2.725"
d="M240.113079,94.605309 L240.112903,41.9917101 C240.111425,38.1274958 240.096801,35.7038103 239.968443,33.3966696 C239.873818,31.1365982 239.524087,28.8939701 238.925823,26.7114061 C237.960259,22.8182806 235.959037,19.2549752 233.116799,16.3817503 C230.251052,13.5738971 226.679636,11.5845622 222.776513,10.6222317 C220.580421,10.0246985 218.324184,9.67521033 216.049985,9.58049224 C213.822086,9.45757463 211.487399,9.43922122 207.86611,9.43670786 L193.46393,9.40388135 C191.790396,9.24852633 190.120371,9.79656085 188.740954,11.0521406 C187.790606,12.1604422 187.361559,13.6185195 187.557881,15.0597856 C187.622307,16.5426888 187.48783,18.0275822 187.151489,19.5052379 C186.728399,21.5761576 185.66886,23.4648429 184.096596,24.9326967 C182.577145,26.4198303 180.686118,27.4753541 178.619657,27.9907975 C176.447678,28.3449098 174.244818,28.4793325 172.045122,28.3920414 L80.6380774,28.3920414 L79.8614472,28.4120378 C77.9090342,28.4404094 75.9574202,28.2981791 74.0291032,27.9867437 C71.9554369,27.5622112 70.0644085,26.5093879 68.5935749,24.9488037 C67.0984097,23.4355646 66.037438,21.5518946 65.5207919,19.4932962 C65.2546737,18.0198526 65.1206899,16.5256833 65.1203182,15.0285536 C65.3061644,13.5973434 64.8764744,12.1523871 63.8096494,10.9258246 C62.4838688,9.73385222 60.6968025,9.18943733 58.9312627,9.43629496 L44.8087832,9.43670753 C41.1888031,9.43921968 38.854755,9.45755221 36.6284554,9.58028608 C34.3590738,9.67460916 32.107503,10.022496 29.9161911,10.6173905 C26.0061514,11.577993 22.4276689,13.5692594 19.5420579,16.3968097 C16.7196121,19.2502622 14.7203309,22.8065311 13.753019,26.6928366 C13.1522709,28.8800048 12.8009448,31.1270772 12.7057758,33.3920326 C12.5823013,35.6091548 12.5638514,37.9329717 12.5613261,41.537158 L12.5609083,94.6192271 L12.4344679,462.171027 L12.4352833,464.543752 C12.4390636,467.943344 12.4609049,470.196572 12.5790787,472.349831 C12.6735441,474.637526 13.0226185,476.907641 13.6197043,479.117002 C14.5749758,483.153945 16.6149886,486.748754 19.4160901,489.575326 C22.2160058,492.400701 25.7763005,494.458558 29.7745226,495.424772 C31.9691557,496.029561 34.2238023,496.383332 36.4963747,496.479328 C38.8165059,496.609114 41.2524845,496.623894 45.1376167,496.625386 L207.785016,496.625115 C211.409267,496.622466 213.827119,496.603539 216.045392,496.479607 C218.315186,496.384037 220.567506,496.031377 222.759579,495.42824 C226.753167,494.465692 230.277773,492.414883 233.045718,489.598308 C235.822061,486.773186 237.837217,483.176851 238.796896,479.134958 C239.408372,476.922432 239.884421,474.644978 239.968452,472.35078 C240.096822,470.011514 240.111425,467.554568 240.112903,463.637423 L240.113079,94.605309 Z"
/>
<g fill="#E4E4DF" transform="translate(109.777 11.934)">
<path
d="M42.8910917,6.56372515 C41.0689305,6.56372515 39.591777,5.09438522 39.591777,3.28186257 C39.591777,1.46933992 41.0689305,0 42.8910917,0 C44.7132529,0 46.1904065,1.46933992 46.1904065,3.28186257 C46.1904065,5.09438522 44.7132529,6.56372515 42.8910917,6.56372515 Z"
/>
<rect width="33.593" height="2.984" y="1.79" rx="1.492" />
</g>
<g transform="translate(31 40)">
<g fill="#1776BF" transform="translate(44.525)">
<path
d="M64.6485642,26.7301487 C62.6634924,26.7301487 60.898984,27.6439756 59.7594057,29.0695455 L53.8409506,26.8032549 C54.0247536,26.0356403 54.1350353,25.2314728 54.1350353,24.4273051 C54.1350353,22.380333 53.5101052,20.4795733 52.4072876,18.9077911 L59.7226451,11.5971765 C60.3108145,11.853048 60.9725051,11.9992602 61.6709564,11.9992602 C64.3177189,11.9992602 66.4498332,9.87918197 66.4498332,7.2473607 C66.4498332,4.61553942 64.3177189,2.49546118 61.6709564,2.49546118 C59.0241939,2.49546118 56.8920796,4.61553942 56.8920796,7.2473607 C56.8920796,7.83220987 57.0023614,8.38050597 57.1861644,8.892249 L49.7972856,16.2759698 C48.2165802,15.1793776 46.3050295,14.5579754 44.2096758,14.5579754 C41.8202374,14.5579754 39.614602,15.4352491 37.8868542,16.860819 L32.2992445,12.364791 C32.9241744,11.1950926 33.2917804,9.84262891 33.2917804,8.41705905 C33.2917804,3.77481874 29.5054395,0.00985219556 24.8368445,0.00985219556 C20.1682495,0.00985219556 16.3819086,3.77481874 16.3819086,8.41705905 C16.3819086,13.0592994 20.1682495,16.8242659 24.8368445,16.8242659 C26.7483952,16.8242659 28.476143,16.2028637 29.909806,15.1428245 L35.570937,19.6754056 C34.7989646,21.0644224 34.3578375,22.6727576 34.3578375,24.3907521 C34.3578375,25.852875 34.6886828,27.2784449 35.2768523,28.5212493 L28.9172701,32.7614059 C28.3658612,32.4324281 27.7041705,32.2496629 27.0057193,32.2496629 C24.9103657,32.2496629 23.2193785,33.9311042 23.2193785,36.0146293 C23.2193785,38.0981545 24.9103657,39.7795959 27.0057193,39.7795959 C29.1010731,39.7795959 30.7920602,38.0981545 30.7920602,36.0146293 C30.7920602,35.9780763 30.7920602,35.9415232 30.7920602,35.9415232 L37.4089665,31.4820483 C39.1734749,33.1269365 41.5261527,34.1869757 44.099394,34.1869757 L45.6065783,42.5576295 C43.7317882,43.5811155 42.4451674,45.5549815 42.4451674,47.8578251 C42.4451674,51.1841548 45.1654512,53.8890822 48.510665,53.8890822 C51.8558786,53.8890822 54.5761624,51.1841548 54.5761624,47.8578251 C54.5761624,44.7508139 52.2234846,42.2286518 49.2091162,41.8631211 L47.7386925,33.5655734 C49.576722,32.871065 51.1574274,31.6648136 52.2602452,30.0930315 L58.3992638,32.4324281 C58.3992638,32.5786405 58.3625033,32.7248528 58.3625033,32.871065 C58.3625033,36.2705008 61.1563081,39.0485344 64.5750431,39.0485344 C68.0305386,39.0485344 70.7875829,36.2705008 70.7875829,32.871065 C70.8611041,29.5081823 68.0672991,26.7301487 64.6485642,26.7301487 Z M24.8736051,13.1689585 C22.2268426,13.1689585 20.0947283,11.0488803 20.0947283,8.41705905 C20.0947283,5.78523777 22.2268426,3.66515953 24.8736051,3.66515953 C27.5203677,3.66515953 29.6524819,5.78523777 29.6524819,8.41705905 C29.6524819,11.0488803 27.483607,13.1689585 24.8736051,13.1689585 Z M50.9368639,47.8943781 C50.9368639,49.2102888 49.8708068,50.2703279 48.5474255,50.2703279 C47.2240442,50.2703279 46.1579871,49.2102888 46.1579871,47.8943781 C46.1579871,46.5784676 47.2240442,45.5184284 48.5474255,45.5184284 C49.8708068,45.5184284 50.9368639,46.6150206 50.9368639,47.8943781 Z M44.2464364,30.6047745 C40.8277015,30.6047745 38.0338966,27.8267409 38.0338966,24.4273051 C38.0338966,21.0278693 40.8277015,18.2498358 44.2464364,18.2498358 C47.6651713,18.2498358 50.4589762,21.0278693 50.4589762,24.4273051 C50.4589762,27.8267409 47.6651713,30.6047745 44.2464364,30.6047745 Z"
/>
<text
font-family="Arial-BoldMT, Arial"
font-size="10.034"
font-weight="bold"
letter-spacing=".179"
>
<tspan x="0" y="67.949">CUMULOCITY IoT</tspan>
</text>
</g>
<g transform="translate(0 91.56)">
<path
stroke="#828282"
stroke-width=".627"
d="M182.491525,6.58474576 L2.50847458,6.58474576 C1.90236547,6.58474576 1.35363665,6.83042002 0.956435116,7.22762156 C0.55923358,7.62482309 0.313559322,8.17355191 0.313559322,8.77966102 L0.313559322,38.8813559 C0.313559322,39.487465 0.55923358,40.0361939 0.956435116,40.4333954 C1.35363665,40.8305969 1.90236547,41.0762712 2.50847458,41.0762712 L182.491525,41.0762712 C183.097635,41.0762712 183.646363,40.8305969 184.043565,40.4333954 C184.440766,40.0361939 184.686441,39.487465 184.686441,38.8813559 L184.686441,8.77966102 C184.686441,8.17355191 184.440766,7.62482309 184.043565,7.22762156 C183.646363,6.83042002 183.097635,6.58474576 182.491525,6.58474576 Z"
/>
<rect width="43.898" height="10.661" x="6.898" fill="#FFF" />
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="7.525"
letter-spacing=".251"
>
<tspan x="10.034" y="7.627" translate>Tenant</tspan>
</text>
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="12"
letter-spacing=".094"
>
<tspan x="10.034" y="28.305">{{ this.tenantId }}</tspan>
</text>
</g>
<g transform="translate(0 153.017)">
<path
stroke="#828282"
stroke-width=".627"
d="M182.491525,6.58474576 L2.50847458,6.58474576 C1.90236547,6.58474576 1.35363665,6.83042002 0.956435116,7.22762156 C0.55923358,7.62482309 0.313559322,8.17355191 0.313559322,8.77966102 L0.313559322,38.8813559 C0.313559322,39.487465 0.55923358,40.0361939 0.956435116,40.4333954 C1.35363665,40.8305969 1.90236547,41.0762712 2.50847458,41.0762712 L182.491525,41.0762712 C183.097635,41.0762712 183.646363,40.8305969 184.043565,40.4333954 C184.440766,40.0361939 184.686441,39.487465 184.686441,38.8813559 L184.686441,8.77966102 C184.686441,8.17355191 184.440766,7.62482309 184.043565,7.22762156 C183.646363,6.83042002 183.097635,6.58474576 182.491525,6.58474576 Z"
/>
<rect width="43.898" height="10.661" x="6.898" fill="#FFF" />
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="7.525"
letter-spacing=".251"
>
<tspan x="10.034" y="7.627" translate>Instance</tspan>
</text>
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="12"
letter-spacing=".094"
>
<tspan x="10.034" y="28.305">{{ this.instance }}</tspan>
</text>
<polygon
fill="#121212"
points="164.8 20.486 169.949 27.175 175.098 20.486"
/>
</g>
<g transform="translate(0 209.458)">
<path
stroke="#191919"
stroke-opacity=".32"
stroke-width=".627"
d="M182.491525,6.58474576 L2.50847458,6.58474576 C1.90236547,6.58474576 1.35363665,6.83042002 0.956435116,7.22762156 C0.55923358,7.62482309 0.313559322,8.17355191 0.313559322,8.77966102 L0.313559322,38.8813559 C0.313559322,39.487465 0.55923358,40.0361939 0.956435116,40.4333954 C1.35363665,40.8305969 1.90236547,41.0762712 2.50847458,41.0762712 L182.491525,41.0762712 C183.097635,41.0762712 183.646363,40.8305969 184.043565,40.4333954 C184.440766,40.0361939 184.686441,39.487465 184.686441,38.8813559 L184.686441,8.77966102 C184.686441,8.17355191 184.440766,7.62482309 184.043565,7.22762156 C183.646363,6.83042002 183.097635,6.58474576 182.491525,6.58474576 Z"
/>
<use fill="#FFF" xlink:href="#login-screen-c" />
<rect width="48.288" height="10.661" x="6.898" fill="#FFF" />
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="7.525"
letter-spacing=".251"
>
<tspan x="10.034" y="7.627" translate>Device ID</tspan>
</text>
<text
fill="#000"
fill-opacity=".87"
font-family="Roboto-Regular, Roboto"
font-size="12"
letter-spacing=".094"
>
<tspan x="10.034" y="28.305">{{ this.deviceId }}</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
<div class="modal-footer separator-top">
<button
(click)="cancel()"
type="button"
title="{{ 'Cancel' | translate }}"
class="btn btn-default"
>
<span translate>Cancel</span>
</button>
<button
type="button"
class="btn btn-primary"
title="{{ 'Waiting' | translate }}"
[ngClass]="{ 'btn-pending': pendingDeviceBootstrap }"
>
<span translate> Waiting </span>
</button>
</div>
</cdk-step>
<cdk-step></cdk-step>
</c8y-stepper>
<!-- SUCCESS CONTAINER -->
<ng-container *ngIf="success === true">
<div class="overflow-hidden" style="height: 561px">
<div class="row">
<div class="col-xs-7 no-gutter">
<svg class="animated fadeInLeft" viewBox="0 0 359 561">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#C9EC62" offset="0%"></stop>
<stop stop-color="#98D533" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
<stop stop-color="#B5EB45" offset="0%"></stop>
<stop stop-color="#61AA11" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-14">
<path
d="M176,264.832382 C176,384.416258 230.494455,491.134857 315.751406,561 L-2.27373675e-13,561 L-2.27373675e-13,0 L281.92192,0 C216.346952,68.5640746 176,161.935591 176,264.832382 Z"
id="Path"
fill="url(#linearGradient-1)"
></path>
<g id="connect-smartphone" transform="translate(32.000000, 52.000000)">
<g id="Group" transform="translate(0.011024, 0.049750)">
<g transform="translate(90.335812, 185.104651)" fill="#F4BE84" id="Path">
<polygon
points="0 323.754717 0 0.162201762 114.190041 0.162201762 114.190041 323.754717"
></polygon>
</g>
<g transform="translate(90.335812, 236.814573)" fill="#D89E66" id="Path">
<polygon
points="32.4403524 272.012355 36.170993 0 0.162201762 0 0.162201762 272.012355"
></polygon>
</g>
<path
d="M114.649856,179.881754 C110.108207,179.881754 106.215365,177.773131 102.809128,174.366894 L63.2318978,134.789664 C56.4194238,127.97719 55.608415,117.758479 62.420889,110.946005 C69.233363,104.133531 79.4520741,104.94454 86.2645481,111.757014 L125.679576,151.172042 C132.49205,157.984516 133.140857,168.365429 126.328383,175.177903 C122.922146,178.746342 119.029304,179.881754 114.649856,179.881754 M146.603604,151.172042 C141.899752,151.172042 137.0337,149.712227 133.465261,146.143788 L96.9698644,104.295733 C94.3746362,101.538303 87.5621622,85.966934 94.6990397,78.8300564 C101.835917,71.6931789 111.405821,71.6931789 118.542699,78.8300564 L159.579745,120.029304 C166.716622,127.166182 166.55442,138.682507 159.579745,145.819384 C156.011306,149.387823 151.307455,151.172042 146.603604,151.172042"
id="Shape"
fill="#D89E66"
></path>
<path
d="M205.807247,10.0565093 L7.43449163,206.482843 C-1.81100881,215.566142 -1.81100881,230.326502 7.43449163,239.409801 L84.1559252,315.320226 C93.4014256,324.403524 108.323988,324.403524 117.407286,315.320226 L315.780042,119.056093 C325.025542,109.972795 325.025542,95.2124344 315.780042,86.1291357 L239.22081,10.218711 C229.975309,0.973210573 215.052747,0.973210573 205.807247,10.0565093"
id="Path"
fill="#2A2B2A"
></path>
<path
d="M204.023027,77.6946441 C199.64358,77.6946441 195.588536,75.5860212 192.182299,72.1797842 L152.767271,32.9269577 C145.954797,26.1144837 145.468191,15.7335709 152.118464,8.92109692 C158.930938,2.10862291 169.31185,2.75742996 176.124324,9.56990397 L215.539353,48.6605287 C222.351827,55.4730027 222.67623,66.0161172 215.863756,72.8285912 C212.457519,76.39703 208.402475,77.6946441 204.023027,77.6946441"
id="Path"
fill="#D89E66"
></path>
<path
d="M210.024493,6.81247401 L11.6517375,203.076606 C2.40623701,212.159905 2.40623701,226.920265 11.6517375,236.003564 L88.2109692,311.913989 C97.4564697,320.997287 112.379032,320.997287 121.46233,311.913989 L319.835086,115.649856 C329.080586,106.566558 329.080586,91.8061974 319.835086,82.7228987 L243.275854,6.81247401 C234.030353,-2.27082467 219.107791,-2.27082467 210.024493,6.81247401"
id="Path"
fill="#373737"
></path>
<path
d="M82.209504,255.467775 C82.209504,263.415662 75.8836353,269.741531 67.9357489,269.741531 C59.9878626,269.741531 53.6619939,263.415662 53.6619939,255.467775 C53.6619939,247.519889 59.9878626,241.19402 67.9357489,241.19402 C75.8836353,241.19402 82.209504,247.519889 82.209504,255.467775 M301.019681,61.7988714 C300.208672,60.9878626 299.07326,60.9878626 298.262251,61.7988714 L318.050866,81.7496881 C318.861875,80.9386793 318.861875,79.803267 318.050866,78.9922582 L301.019681,61.7988714 Z M196.399545,20.9240273 C195.588536,20.1130185 194.453123,20.1130185 193.804316,20.9240273 L184.721018,30.007326 C183.910009,30.8183348 183.910009,31.9537472 184.721018,32.6025542 L196.399545,20.9240273 Z M271.012355,55.959608 C272.634373,57.5816256 275.229601,57.5816256 276.851619,55.959608 C278.473636,54.3375903 278.473636,51.7423621 276.851619,50.1203445 C275.229601,48.4983269 272.634373,48.4983269 271.012355,50.1203445 C269.390338,51.9045639 269.390338,54.4997921 271.012355,55.959608"
id="Shape"
fill="#2A2B2A"
></path>
<path
d="M131.194436,285.961707 C131.194436,285.961707 37.2796159,195.777527 37.4416078,195.615325 L203.860826,24.6546679 C204.023027,24.4924661 204.347431,24.4924661 204.509633,24.6546679 L300.370874,117.109672 L131.194436,285.961707 Z"
id="Path"
fill="#FFFFFF"
></path>
<g
id="Group-2"
transform="translate(169.988976, 155.950250) rotate(34.000000) translate(-169.988976, -155.950250) translate(123.988976, 109.950250)"
>
<circle
id="Oval-2"
fill="url(#linearGradient-2)"
cx="45.6120017"
cy="45.6120017"
r="45.6120017"
></circle>
<text
id="Check---FontAwesome"
font-family="'dlt-c8y-mat-sharp-subset'"
font-size="69.9999999"
font-weight="normal"
fill="#FFFFFF"
>
<tspan x="12.32" y="70.92"></tspan>
</text>
</g>
<polygon
id="Path"
fill="#176878"
points="47.9849322 184.423404 37.4418176 195.615325 131.194436 285.961707 142.061954 275.742996"
></polygon>
<path
d="M287.394733,130.085813 L300.208672,117.109672 L203.698624,24.0058608 C203.536422,23.843659 203.212019,23.843659 203.049817,24.0058608 L190.235878,36.3331947 L287.394733,130.085813 Z"
id="Path"
fill="#394852"
></path>
<path
d="M308.318761,137.060489 L308.480962,136.898287 L326.809761,151.496446 L293.396198,186.045421 L289.989961,190.262667 C282.366479,199.670369 271.49896,212.970914 266.308504,218.16137 C256.414197,228.217879 248.790714,255.792179 236.138976,269.903732 L229.326502,277.365013 C214.890545,293.260786 203.536422,308.183348 203.212019,345.16535 L203.212019,346.462964 C203.212019,383.931571 189.100465,350.518008 185.045421,340.461499 L184.072211,337.866271 L189.424869,285.150698 L180.34157,303.803901 L125.517375,312.400594 L125.517375,311.751787 C125.517375,306.723532 126.652787,275.094189 147.901218,254.170161 C165.905613,236.490169 196.399545,226.43366 216.512563,213.944124 L216.836967,213.619721 L216.836967,213.619721 L290.80097,139.169112 C295.829225,134.303059 302.966102,133.654252 308.318761,137.060489 Z M95.0234432,129.923612 C91.9416097,126.841778 90.8061974,122.624532 90.8061974,117.920681 L90.3195921,90.5085833 C90.3195921,81.1008811 97.1320661,73.4773983 106.377567,73.4773983 C115.623067,73.4773983 122.435541,81.1008811 122.435541,90.5085833 L122.922146,117.920681 C122.922146,127.328383 115.785269,134.951866 106.539768,134.951866 C101.998119,134.951866 98.1052767,133.005445 95.0234432,129.923612"
id="Shape"
fill="#F4BE84"
></path>
<path
d="M119.678111,117.596278 L119.678111,113.541234 L95.3478467,113.541234 L95.3478467,117.596278 C95.3478467,121.002515 96.3210573,124.084348 98.591882,126.355173 C100.862707,128.625997 103.782338,129.923612 107.350777,129.923612 C114.325453,129.923612 119.678111,124.408752 119.678111,117.596278"
id="Path"
fill="#FFE5CC"
></path>
<path
d="M127.788199,93.1038115 C124.706366,90.021978 123.570953,85.8047322 123.570953,81.1008811 L123.084348,53.6887833 C123.084348,44.2810811 129.896822,36.6575983 139.142323,36.6575983 C148.387823,36.6575983 155.200297,44.2810811 155.200297,53.6887833 L155.524701,81.1008811 C155.524701,90.5085833 148.387823,98.1320661 139.142323,98.1320661 C134.600673,98.1320661 130.707831,96.185645 127.788199,93.1038115"
id="Path"
fill="#F4BE84"
></path>
<path
d="M152.280665,81.5874864 L152.280665,77.6946441 L127.950401,77.6946441 L127.950401,81.5874864 C127.950401,84.9937234 128.923612,88.0755569 131.194436,90.3463815 C133.465261,92.6172062 136.384893,94.0770221 139.953331,94.0770221 C146.928007,94.0770221 152.280665,88.3999604 152.280665,81.5874864"
id="Path"
fill="#FFE5CC"
></path>
<path
d="M62.420889,162.688367 C59.3390555,159.606534 58.2036432,155.389288 58.2036432,150.685437 L57.7170379,123.273339 C57.7170379,113.865637 64.5295119,106.242154 73.7750124,106.242154 C83.0205128,106.242154 89.8329868,113.865637 89.8329868,123.273339 L90.3195921,150.685437 C90.3195921,160.093139 83.1827146,167.716622 73.9372141,167.716622 C69.3955648,167.55442 65.5027225,165.607999 62.420889,162.688367"
id="Path"
fill="#F4BE84"
></path>
<path
d="M86.2645481,151.009841 L86.2645481,147.116998 L61.9342837,147.116998 L61.9342837,151.009841 C61.9342837,154.416078 62.9074943,157.497911 65.178319,159.768736 C67.4491436,162.03956 70.3687754,163.499376 73.9372141,163.499376 C80.9118899,163.499376 86.2645481,157.984516 86.2645481,151.009841 M322.754717,158.795525 C318.213068,154.253876 310.751787,153.929472 305.885734,158.957727 L298.262251,167.230017 L306.534541,175.82671 L322.754717,158.795525 Z"
id="Shape"
fill="#FFE5CC"
></path>
<polygon
id="Path"
fill="#373737"
points="205.645045 508.826928 205.645045 368.360202 80.2630829 368.360202 80.2630829 508.826928"
></polygon>
<path
d="M152.118464,60.5012573 C149.03663,57.4194238 147.901218,53.202178 147.901218,48.4983269 L147.414612,21.0862291 C147.414612,11.6785269 154.227086,4.05504406 163.472587,4.05504406 C172.718087,4.05504406 179.530561,11.6785269 179.530561,21.0862291 L180.017167,48.4983269 C180.017167,57.9060291 172.880289,65.5295119 163.634789,65.5295119 C159.093139,65.3673102 155.200297,63.420889 152.118464,60.5012573"
id="Path"
fill="#F4BE84"
></path>
<path
d="M176.773131,48.8227304 L176.773131,44.9298881 L152.442867,44.9298881 L152.442867,48.8227304 C152.442867,52.2289674 153.416078,55.3108009 155.686902,57.5816256 C157.957727,59.8524503 160.877359,61.3122661 164.445797,61.3122661 C171.420473,61.3122661 176.773131,55.7974062 176.773131,48.8227304"
id="Path"
fill="#FFE5CC"
></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="col-xs-5 p-t-80 p-l-0 p-r-24">
<h4 class="m-t-80 m-b-16 p-t-80 animated fadeInUp" style="animation-delay: 0.5s">
<strong translate>Smartphone registered.</strong>
</h4>
<p class="p-b-16 animated fadeInUp" style="animation-delay: 0.75s" translate>
You can check your sensor's data in the dashboard which has been created for this
smartphone.
</p>
<span class="text-center animated fadeInUp" style="animation-delay: 1s">
<button
(click)="cancel()"
type="button"
title="{{ 'Close' | translate }}"
class="btn btn-default"
>
<span translate>Close</span>
</button>
<button
(click)="openDashboard()"
type="button"
title="{{ 'Open dashboard' | translate }}"
class="btn btn-primary"
>
<span translate>Open dashboard</span>
</button>
</span>
</div>
</div>
</div>
</ng-container>
<!-- ERROR CONTAINER -->
<ng-container *ngIf="success === false">
<div class="overflow-hidden" style="height: 561px">
<div class="row">
<div class="col-xs-7 no-gutter">
<svg class="animated fadeInLeft" viewBox="0 0 359 561">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#F5515F" offset="0%" />
<stop stop-color="#9F041B" offset="100%" />
</linearGradient>
<linearGradient
x1="50%"
y1="-2.22044605e-14%"
x2="81.4387708%"
y2="136.658045%"
id="linearGradient-2"
>
<stop stop-color="#F5515F" offset="0%" />
<stop stop-color="#9F041B" offset="100%" />
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="error-hand">
<path
d="M176,264.832382 C176,384.416258 230.494455,491.134857 315.751406,561 L-2.27373675e-13,561 L-2.27373675e-13,0 L281.92192,0 C216.346952,68.5640746 176,161.935591 176,264.832382 Z"
id="Path"
fill="url(#linearGradient-1)"
fill-rule="nonzero"
/>
<g id="Group" transform="translate(32.011000, 50.050000)">
<polygon
id="Path"
fill="#F4BE84"
fill-rule="nonzero"
points="90.336 508.86 90.336 185.267 204.526 185.267 204.526 508.86"
/>
<polygon
id="Path"
fill="#D89E66"
fill-rule="nonzero"
points="122.776 508.827 126.507 236.815 90.498 236.815 90.498 508.827"
/>
<path
d="M114.649856,179.881754 C110.108207,179.881754 106.215365,177.773131 102.809128,174.366894 L63.2318978,134.789664 C56.4194238,127.97719 55.608415,117.758479 62.420889,110.946005 C69.233363,104.133531 79.4520741,104.94454 86.2645481,111.757014 L125.679576,151.172042 C132.49205,157.984516 133.140857,168.365429 126.328383,175.177903 C122.922146,178.746342 119.029304,179.881754 114.649856,179.881754 M146.603604,151.172042 C141.899752,151.172042 137.0337,149.712227 133.465261,146.143788 L96.9698644,104.295733 C94.3746362,101.538303 87.5621622,85.966934 94.6990397,78.8300564 C101.835917,71.6931789 111.405821,71.6931789 118.542699,78.8300564 L159.579745,120.029304 C166.716622,127.166182 166.55442,138.682507 159.579745,145.819384 C156.011306,149.387823 151.307455,151.172042 146.603604,151.172042"
id="Shape"
fill="#D89E66"
fill-rule="nonzero"
/>
<path
d="M205.807247,10.0565093 L7.43449163,206.482843 C-1.81100881,215.566142 -1.81100881,230.326502 7.43449163,239.409801 L84.1559252,315.320226 C93.4014256,324.403524 108.323988,324.403524 117.407286,315.320226 L315.780042,119.056093 C325.025542,109.972795 325.025542,95.2124344 315.780042,86.1291357 L239.22081,10.218711 C229.975309,0.973210573 215.052747,0.973210573 205.807247,10.0565093"
id="Path"
fill="#2A2B2A"
fill-rule="nonzero"
/>
<path
d="M204.023027,77.6946441 C199.64358,77.6946441 195.588536,75.5860212 192.182299,72.1797842 L152.767271,32.9269577 C145.954797,26.1144837 145.468191,15.7335709 152.118464,8.92109692 C158.930938,2.10862291 169.31185,2.75742996 176.124324,9.56990397 L215.539353,48.6605287 C222.351827,55.4730027 222.67623,66.0161172 215.863756,72.8285912 C212.457519,76.39703 208.402475,77.6946441 204.023027,77.6946441"
id="Path"
fill="#D89E66"
fill-rule="nonzero"
/>
<path
d="M210.024493,6.81247401 L11.6517375,203.076606 C2.40623701,212.159905 2.40623701,226.920265 11.6517375,236.003564 L88.2109692,311.913989 C97.4564697,320.997287 112.379032,320.997287 121.46233,311.913989 L319.835086,115.649856 C329.080586,106.566558 329.080586,91.8061974 319.835086,82.7228987 L243.275854,6.81247401 C234.030353,-2.27082467 219.107791,-2.27082467 210.024493,6.81247401"
id="Path"
fill="#373737"
fill-rule="nonzero"
/>
<path
d="M82.209504,255.467775 C82.209504,263.415662 75.8836353,269.741531 67.9357489,269.741531 C59.9878626,269.741531 53.6619939,263.415662 53.6619939,255.467775 C53.6619939,247.519889 59.9878626,241.19402 67.9357489,241.19402 C75.8836353,241.19402 82.209504,247.519889 82.209504,255.467775 M301.019681,61.7988714 C300.208672,60.9878626 299.07326,60.9878626 298.262251,61.7988714 L318.050866,81.7496881 C318.861875,80.9386793 318.861875,79.803267 318.050866,78.9922582 L301.019681,61.7988714 Z M196.399545,20.9240273 C195.588536,20.1130185 194.453123,20.1130185 193.804316,20.9240273 L184.721018,30.007326 C183.910009,30.8183348 183.910009,31.9537472 184.721018,32.6025542 L196.399545,20.9240273 Z M271.012355,55.959608 C272.634373,57.5816256 275.229601,57.5816256 276.851619,55.959608 C278.473636,54.3375903 278.473636,51.7423621 276.851619,50.1203445 C275.229601,48.4983269 272.634373,48.4983269 271.012355,50.1203445 C269.390338,51.9045639 269.390338,54.4997921 271.012355,55.959608"
id="Shape"
fill="#2A2B2A"
fill-rule="nonzero"
/>
<path
d="M131.194436,285.961707 C131.194436,285.961707 37.2796159,195.777527 37.4413985,195.615325 L203.860826,24.6546679 C204.023027,24.4924661 204.347431,24.4924661 204.509633,24.6546679 L300.370874,117.109672 L131.194436,285.961707 Z"
id="Path"
fill="#FFFFFF"
fill-rule="nonzero"
/>
<g
transform="translate(169.989007, 155.950233) rotate(45.000000) translate(-169.989007, -155.950233) translate(123.989007, 109.950233)"
>
<circle
id="Oval"
fill="url(#linearGradient-2)"
fill-rule="nonzero"
cx="45.612"
cy="45.612"
r="45.612"
/>
<g
transform="translate(17.000000, 14.000000)"
fill="#FFFFFF"
font-family="'dlt-c8y-mat-sharp-subset'"
font-size="55"
font-weight="normal"
id=""
>
<text>
<tspan x="0.792723895" y="47.2571995"></tspan>
</text>
</g>
</g>
<polygon
id="Path"
fill="#176878"
fill-rule="nonzero"
points="47.985 184.423 37.442 195.615 131.194 285.962 142.062 275.743"
/>
<path
d="M287.394733,130.085813 L300.208672,117.109672 L203.698624,24.0058608 C203.536422,23.843659 203.212019,23.843659 203.049817,24.0058608 L190.235878,36.3331947 L287.394733,130.085813 Z"
id="Path"
fill="#394852"
fill-rule="nonzero"
/>
<path
d="M308.318761,137.060489 L308.480962,136.898287 L326.809761,151.496446 L293.396198,186.045421 L289.989961,190.262667 C282.366479,199.670369 271.49896,212.970914 266.308504,218.16137 C256.414197,228.217879 248.790714,255.792179 236.138976,269.903732 L229.326502,277.365013 C214.890545,293.260786 203.536422,308.183348 203.212019,345.16535 L203.212019,346.462964 C203.212019,383.931571 189.100465,350.518008 185.045421,340.461499 L184.072211,337.866271 L189.424869,285.150698 L180.34157,303.803901 L125.517375,312.400594 L125.517375,311.751787 C125.517375,306.723532 126.652787,275.094189 147.901218,254.170161 C165.905613,236.490169 196.399545,226.43366 216.512563,213.944124 L216.836967,213.619721 L216.836967,213.619721 L290.80097,139.169112 C295.829225,134.303059 302.966102,133.654252 308.318761,137.060489 Z M95.0234432,129.923612 C91.9416097,126.841778 90.8061974,122.624532 90.8061974,117.920681 L90.3195921,90.5085833 C90.3195921,81.1008811 97.1320661,73.4773983 106.377567,73.4773983 C115.623067,73.4773983 122.435541,81.1008811 122.435541,90.5085833 L122.922146,117.920681 C122.922146,127.328383 115.785269,134.951866 106.539768,134.951866 C101.998119,134.951866 98.1052767,133.005445 95.0234432,129.923612"
id="Shape"
fill="#F4BE84"
fill-rule="nonzero"
/>
<path
d="M119.678111,117.596278 L119.678111,113.541234 L95.3478467,113.541234 L95.3478467,117.596278 C95.3478467,121.002515 96.3210573,124.084348 98.591882,126.355173 C100.862707,128.625997 103.782338,129.923612 107.350777,129.923612 C114.325453,129.923612 119.678111,124.408752 119.678111,117.596278"
id="Path"
fill="#FFE5CC"
fill-rule="nonzero"
/>
<path
d="M127.788199,93.1038115 C124.706366,90.021978 123.570953,85.8047322 123.570953,81.1008811 L123.084348,53.6887833 C123.084348,44.2810811 129.896822,36.6575983 139.142323,36.6575983 C148.387823,36.6575983 155.200297,44.2810811 155.200297,53.6887833 L155.524701,81.1008811 C155.524701,90.5085833 148.387823,98.1320661 139.142323,98.1320661 C134.600673,98.1320661 130.707831,96.185645 127.788199,93.1038115"
id="Path"
fill="#F4BE84"
fill-rule="nonzero"
/>
<path
d="M152.280665,81.5874864 L152.280665,77.6946441 L127.950401,77.6946441 L127.950401,81.5874864 C127.950401,84.9937234 128.923612,88.0755569 131.194436,90.3463815 C133.465261,92.6172062 136.384893,94.0770221 139.953331,94.0770221 C146.928007,94.0770221 152.280665,88.3999604 152.280665,81.5874864"
id="Path"
fill="#FFE5CC"
fill-rule="nonzero"
/>
<path
d="M62.420889,162.688367 C59.3390555,159.606534 58.2036432,155.389288 58.2036432,150.685437 L57.7170379,123.273339 C57.7170379,113.865637 64.5295119,106.242154 73.7750124,106.242154 C83.0205128,106.242154 89.8329868,113.865637 89.8329868,123.273339 L90.3195921,150.685437 C90.3195921,160.093139 83.1827146,167.716622 73.9372141,167.716622 C69.3955648,167.55442 65.5027225,165.607999 62.420889,162.688367"
id="Path"
fill="#F4BE84"
fill-rule="nonzero"
/>
<path
d="M86.2645481,151.009841 L86.2645481,147.116998 L61.9342837,147.116998 L61.9342837,151.009841 C61.9342837,154.416078 62.9074943,157.497911 65.178319,159.768736 C67.4491436,162.03956 70.3687754,163.499376 73.9372141,163.499376 C80.9118899,163.499376 86.2645481,157.984516 86.2645481,151.009841 M322.754717,158.795525 C318.213068,154.253876 310.751787,153.929472 305.885734,158.957727 L298.262251,167.230017 L306.534541,175.82671 L322.754717,158.795525 Z"
id="Shape"
fill="#FFE5CC"
fill-rule="nonzero"
/>
<polygon
id="Path"
fill="#373737"
fill-rule="nonzero"
points="205.645 508.827 205.645 368.36 80.263 368.36 80.263 508.827"
/>
<path
d="M152.118464,60.5012573 C149.03663,57.4194238 147.901218,53.202178 147.901218,48.4983269 L147.414612,21.0862291 C147.414612,11.6785269 154.227086,4.05504406 163.472587,4.05504406 C172.718087,4.05504406 179.530561,11.6785269 179.530561,21.0862291 L180.017167,48.4983269 C180.017167,57.9060291 172.880289,65.5295119 163.634789,65.5295119 C159.093139,65.3673102 155.200297,63.420889 152.118464,60.5012573"
id="Path"
fill="#F4BE84"
fill-rule="nonzero"
/>
<path
d="M176.773131,48.8227304 L176.773131,44.9298881 L152.442867,44.9298881 L152.442867,48.8227304 C152.442867,52.2289674 153.416078,55.3108009 155.686902,57.5816256 C157.957727,59.8524503 160.877359,61.3122661 164.445797,61.3122661 C171.420473,61.3122661 176.773131,55.7974062 176.773131,48.8227304"
id="Path"
fill="#FFE5CC"
fill-rule="nonzero"
/>
</g>
</g>
</g>
</svg>
</div>
<div class="col-xs-5 p-t-80 p-l-0 p-r-24">
<h4 class="m-t-80 m-b-16 p-t-80 animated fadeInUp" style="animation-delay: 0.5s">
<strong translate>An error occurred.</strong>
</h4>
<p class="p-b-16 animated fadeInUp" style="animation-delay: 0.75s">
{{ this.errorMessage | translate }}
</p>
<span class="text-center animated fadeInUp" style="animation-delay: 1s">
<button
(click)="cancel()"
type="button"
title="{{ 'Close' | translate }}"
class="btn btn-default"
>
<span translate>Close</span>
</button>
<button
(click)="retry()"
type="button"
title="{{ 'Retry' | translate }}"
class="btn btn-primary"
>
<span translate>Retry</span>
</button>
</span>
</div>
</div>
</div>
</ng-container>
<!-- TBD, at the moment no error-state screen is provided as mockup -->