<div class="content">
  <div class="width">
    <h1 class="title">{{'MetamaskHowTo.Title' | translate }}</h1>
    <p>
      {{'MetamaskHowTo.OurService' | translate }}
    </p>
    <p [innerHtml]="'MetamaskHowTo.IfYouWant' | translate "></p>
    <p>
      {{'MetamaskHowTo.Describe' | translate }}
    </p>
  </div>
  <h2 class="partition-title">{{'MetamaskHowTo.Part' | translate }} 1. {{'MetamaskHowTo.InstallingMetamask' | translate
    }}</h2>
  <div class="partition-block">
    <div class="width">
      <div *ngIf="browser === 'chrome'; else firefoxManual">
        <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 1</h3>
        <p>{{'MetamaskHowTo.GoToWebStore' | translate }}</p>
        <a href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn" target="_blank" class="main-btn">{{'MetamaskHowTo.GetMetamaskButtonText'
          | translate }}</a>

        <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 2</h3>
        <p>{{'MetamaskHowTo.ClickToInstallChrome' | translate }}</p>
        <img src="/assets/img/NoMetaMask1.png"/>

        <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 3</h3>
        <p>{{'MetamaskHowTo.AddExtensionChrome' | translate }}</p>
        <img src="/assets/img/NoMetaMask2.png"/>
      </div>
      <ng-template #firefoxManual>
        <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 1</h3>
        <p>{{'MetamaskHowTo.GoToWebStore' | translate }}</p>
        <a href="https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/" target="_blank" class="main-btn">{{'MetamaskHowTo.GetMetamaskButtonText'
          | translate }}</a>

        <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 2</h3>
        <p>{{'MetamaskHowTo.ClickToInstallFirefox' | translate }}</p>
        <img src="/assets/img/NoMetaMask1_firefox.png"/>

        <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 3</h3>
        <p>{{'MetamaskHowTo.AddExtensionFirefox' | translate }}</p>
        <img src="/assets/img/NoMetaMask2.png"/>
      </ng-template>
    </div>
  </div>
  <h2 class="partition-title">{{'MetamaskHowTo.Part' | translate }} 2. {{'MetamaskHowTo.CreatingWallet' | translate
    }}</h2>
  <div class="partition-block">
    <div class="width">
      <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 1</h3>
      <p>{{'MetamaskHowTo.ClickLogo' | translate }}</p>
      <img src="/assets/img/NoMetaMask2a.png"/>

      <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 2</h3>
      <p>{{'MetamaskHowTo.AcceptTerms' | translate }}</p>
      <img src="/assets/img/NoMetaMask3.png"/>

      <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 3</h3>
      <p>{{'MetamaskHowTo.ClickMainNetwork' | translate }}</p>
      <img src="/assets/img/NoMetaMask4.png"/>

      <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 4</h3>
      <p>{{'MetamaskHowTo.ChangeNetwork' | translate }}</p>
      <img src="/assets/img/NoMetaMask5.png"/>

      <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 5</h3>
      <p>{{'MetamaskHowTo.EnterPassword' | translate }}</p>
      <img src="/assets/img/NoMetaMask6.png"/>

      <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 6</h3>
      <p>{{'MetamaskHowTo.ClickSafe' | translate }}</p>
      <img src="/assets/img/NoMetaMask7.png"/>

      <h3 class="bold-text">
        {{'MetamaskHowTo.Congratulations' | translate }}<br>
        {{'MetamaskHowTo.DontForget' | translate }}<br>
        {{'MetamaskHowTo.YouNeedEther' | translate }}
      </h3>
      <img src="/assets/img/NoMetaMask8.png"/>

      <h3 class="bold-text">{{'MetamaskHowTo.Step' | translate }} 7</h3>
      <p>{{'MetamaskHowTo.ReloadPage' | translate }}</p>
      <a (click)="navigateToMainPage()" class="main-btn">{{'MetamaskHowTo.ReloadButtonText'
        | translate }}</a>
    </div>
  </div>
</div>

