{% load staticfiles otree %}

<div class="instructions well well-lg">

    <h3 class="panel-sub-heading">
        Game 1 Instructions
    </h3>

    <div class="panel-body">

        <p>
            Welcome to this message game. Two players will play together in the game.
            The sender(player 1: p1) will see two options of money allocation for both the sender and the receiver(player2: p2).
        </p>
        
        <p>
            The sender know the amount of money, while the player 2 only sees two masked options.
            The sender use mouse the choose "left" or "right" to show which option is better for player2.
            The receiver may trust or not trust the message and make a choice between two options.
            Final allocated money will be determined by reciever's choice.
        </p>

            <p>

            The total amount gained by the game will be recorded.

        </p>

    </div>


 <div class="container">
     <div class="panel-body">


    <ul class="list-inline text-center nav navbar-nav">
<li>
            <a><small><img src="{% static "games/Picture1.png" %}"/></small><br>player 1</a>
        </li>

        <li>
            <a><small><img src="{% static "games/Picture1.png" %}"/></small><br>player 2</a>
        </li>

        <li>
            <a><small><img src="{% static "games/Picture1.png" %}"/></small><br>player 3</a>
        </li>

         <li>
            <a><small><img src="{% static "games/Picture1.png" %}"/></small><br>player 4</a>
        </li>

         <li>
            <a><small><img src="{% static "games/Picture1.png" %}"/></small><br>player 5</a>
        </li>

        <li>
            <a><small><img src="{% static "games/Picture1.png" %}"/></small><br>player 6</a>
        </li>

</ul>
          </div>

</div>
</div>