Siggg/culottes

<form class="ui form" name="factory">
 <h1>Create a new revolution</h1>
 <h2 class="ui header">1. Set the criteria, the hashtag, the distribution period and the distribution amount of your new revolution.</h2>
 
 <div class="field">
  <label>The criteria of your new revolution</label>
  <input [(ngModel)]="criteria" name="criteria" type="text" placeholder="Enter the criteria. It should start with 'the' or 'a' or 'one of' or a proper noun. For instance 'one of the 10 most creative street artists this year' or 'Mr Vitaly Dmitriyevich ''Vitalik'' Buterin born January 31, 1994 in Kolomna, Russia'." />
 </div>

 <!--div *ngIf="address == account" class="ui message">
  <div class="header">Hey, this is your own address! Name it so that they know it is yours.</div>
  <input [(ngModel)]="name" name="name" type="text" placeholder="You can give your address a public name." />
 </div-->

 <div *ngIf="showErrorMessageForCriteria" class="ui negative message">
  <div class="header">Forbidden criteria</div>
  <p>This field should contain a non-empty criteria. It should start with 'the', 'a', 'an' or 'one of' or a proper noun.</p>
 </div>

 <div class="field">
  <label>The hashtag for discussing the votes on social media</label>
  <input [(ngModel)]="hashtag" name="hashtag" type="text" placeholder="Enter the hashtag. It should start with a #. For instance #CreativeStreetArtists or #Vitalik." />
 </div>

 <div *ngIf="showErrorMessageForHashtag" class="ui negative message">
  <div class="header">Forbidden hashtag</div>
  <p>This field should contain a non-empty hashtag. It must start with a #</p>
 </div>

 <div class="field">
  <label>How many Ethereum blocks should be mined between two distributions of ETH by your revolution?</label>
  <div class="description">It takes approximately 13 seconds to mine 1 Ethereum block on average.</div>
  <input [(ngModel)]="distributionBlockPeriod" type="number" name="distributionBlockPeriod" placeholder="Enter the number of Ethereum blocks which should be mined before the next distribution by your revolution? One block is mined on average every 13 seconds."/>
  <div class="description" *ngIf="distributionBlockPeriod">So {{ distributionBlockPeriod }} blocks take approximately {{ distributionBlockPeriod * 13 }} seconds or {{ (distributionBlockPeriod * 13 / 60)+'' | slice:0:10 }} minutes or {{ (distributionBlockPeriod * 13 / 3600)+'' | slice:0:8 }} hours or {{ (distributionBlockPeriod * 13 / 3600 / 24)+'' | slice:0:6 }} days.</div>
 </div>

 <div *ngIf="showErrorMessageForPeriod" class="ui negative message">
  <div class="header">Forbidden number of blocks</div>
  <p>This field should contain a non-null positive integer number of ETH.</p>
 </div>

 <div class="field">
  <label>How much ETH should your revolution distribute at each distribution ?</label>
  <div class="ui right labeled input">
   <input [(ngModel)]="distributionAmount" type="number" name="distributionAmount" placeholder="Enter the amount of ETH which should be distributed by your revolution at each distribution." (change)="onAmountChange($event)"/>
   <div class="ui label">ETH</div>
  </div>
  <div class="ui action input">
   <div class="ui right aligned label fluid" style="text-align:right;">= {{ convertToFiat(distributionAmount) }}</div>
   <select (change)="onCurrencyChange($event)" class="ui compact dropdown label" style="max-width:6em;">
    <option value="EUR" [selected]="currency() == 'EUR'">€</option>
    <option value="USD" [selected]="currency() == 'USD'">$</option>
    <option [selected]="currency() == 'AUD'">AUD</option>
    <option [selected]="currency() == 'CAD'">CAD</option>
    <option [selected]="currency() == 'CNY'">CNY</option>
    <option value="GBP" [selected]="currency() == 'GBP'">£</option>
    <option value="JPY" [selected]="currency() == 'JPY'">¥</option>
   </select>
  </div>
 </div>
  
 <div *ngIf="showErrorMessageForAmount" class="ui negative message">
  <div class="header">Forbidden amount</div>
  <p>This field should contain a non-null positive number of ETH. Decimals are separated using a dot.</p>
 </div>

 <!-- div *ngIf="showErrorMessageForBalance" class="ui negative message">
  <div class="header">Insufficient funds in your wallet</div>
  <p>You want to stake {{ amount }} ETH but your wallet only contains {{ accountBalance }} ETH. You should set a lower amount of ETH for this vote. Or you can buy more ETH using your wallet options or from an Exchange such as <a href="https://www.coinbase.com">Coinbase</a>. Also think you will have mining fees to pay.</p>
 </div-->

 <div class="content">Note that creating a new revolution might cost up to a couple of US dollars or Euros due to the mining fees (sometimes even more). These fees are awarded to the owners of computers securing the blockchain. Your wallet will display the exact cost of these fees after you click on the creation button below and before you confirm it from your wallet.</div>
 <p>&nbsp;</p>
 <div class="field">
  <h2 class="ui header"><label>2. Create your new revolution</label></h2>
  <div class="content">Clicking the button will prepare your vote. You will have to confirm it from your wallet.</div>
  <div class="ui button primary icon labeled" data-tooltip="Click to create a new revolution with the parameters set above." (click)="onRevolutionCreate()"><i class="icon envelope"></i>CREATE. Open my wallet for confirmation.</div>
 </div>

 <div *ngIf="showErrorMessageForCreation" class="ui negative message">
  <div class="content">
   <div class="header">Creation failed</div>
   <p>{{ errorDuringCreation }}</p>
  </div>
 </div>

 <div *ngIf="transactionPending" class="ui positive message">
  <div class="content">
   <div class="header">Creation confirmation started</div>
   <p>You created the {{ hashtag }} revolution with {{ distributionAmount }} ETH to be distributed every {{ distributionBlockPeriod }} blocks (approximately {{ distributionBlockPeriod * 13 }} seconds or {{ (distributionBlockPeriod * 13 / 60)+'' | slice:0:10 }} minutes or {{ (distributionBlockPeriod * 13 / 3600)+'' | slice:0:8 }} hours or {{ (distributionBlockPeriod * 13 / 3600 / 24)+'' | slice:0:6 }} days)...</p>
   <p>Now you can go to step 3 below, or leave this page while the recording of your creation is being confirmed by the blockchain. <!--FIXME span *ngIf="confimationProgress"-->{{ confirmationProgress }} / 24 confirmations received.<!--/span--></p>
   <p>{{ transactionHashes[-1] }} <a href="https://{{ revolutionBlockchain == 'Main' || revolutionBlockchain == 'Mainnet' || revolutionBlockchain == 'Unknown' ? 'www' : revolutionBlockchain.toLowerCase() }}.etherscan.io/tx/{{ transactionHashes[0] }}" target="_blank">See details of your creation transaction on Etherscan</a></p>
  </div>
 </div>
        
 <div *ngIf="transactionConfirmed" class="ui positive message">
  <div class="content">
   <div class="header">Creation fully confirmed</div>
   <p>Creation confirmation fully completed. Your new revolution is ready !</p>
  </div>
 </div>

 <div *ngIf="transactionPending || transactionConfirmed">
  <h2 class="ui header">3. Announce your revolution on twitter !</h2>
  <p><a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fsiggg.github.io%2Fculottes&text=I%20created%20the%20%23{{ hashtag | slice:1 }}%20revolution%20because%20...&hashtags={{ hashtag | slice:1 }}" target="_blank">Click here to complete your tweet : "I created the {{ hashtag }} revolution because [...]"</a></p>
  <p>Once the creation of your revolution has been fully confirmed by the blockchain, you are able to access to from the list of hashtags displayed in the dropdown menu at the home page of this application. Your revolution will have its Ethereum address displayed on its home page.</p>
 </div>

</form>