<commit_before><div class="row">

    <div class="col-xs-12 col-md-7 col-md-push-3">
        <!-- TODO: support pictures, videos, and so on. Use specification for experiment, not database for this. -->
        <!-- TODO: should we support analytics? e.g., how many accesses have there been, etc. -->
        <p>
            <strong>{{ "DESCRIPTION"|translate }}:</strong> {{ experiment['description'] }}
        </p>

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li ng-repeat-start="exp_image in experiment.images.items" data-target="#carousel-example-generic" data-slide-to="0" class="active" ng-if="$first"></li>
            <li ng-repeat-end="exp_image in experiment.images.items" data-target="#carousel-example-generic" data-slide-to="$index" ng-if="!$first"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div ng-repeat-start="exp_image in experiment.images.items" class="item text-center active" style="height: 350px" ng-if="$first">
                <img ng-src="{{ exp_image }}" alt="image">
            </div>
            <div ng-repeat-end class="item text-center" style="height: 350px" ng-if="!$first">
                <img ng-src="{{ exp_image }}" alt="image">
            </div>

          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

        <br>
        <div class="well col-lg-6 col-lg-offset-2 text-center">
            <span style="margin-right: 15px">
                <!-- Math.floor instead of number:0 => number:0 is round, so 1.666 says 2 -->
                <strong>{{ "TIME"|translate }}:</strong> <span ng-show="experiment['time'] >= 3600">{{ Math.floor(experiment['time'] / 3600) }}:</span><span ng-show="experiment['time'] >=3600 && experiment['time'] % 3600 / 60 < 10">0</span><span ng-show="experiment['time'] >= 60">{{ Math.floor(experiment['time'] % 3600 / 60) }}:</span><span ng-show="experiment['time'] % 60 < 10">0</span>{{ experiment['time'] % 60 }}
            </span>

            <span>
                <a ng-disabled="isExperimentReserving() || isExperimentLoading()" href="#" class="btn btn-primary reserve-btn reserve-frame-btn"
                   id="reserve-frame-btn" ng-click="reserve({ where: 'frame' })">{{ 'RESERVE'|translate }}</a>
                <!-- 
                <a ng-disabled="isExperimentReserving()" href="#" class="btn btn-primary reserve-btn reserve-frame-btn"
                   id="reserve-frame-btn" ng-click="reserve({ where: 'frame' })">{{ 'RESERVE_FRAME'|translate }}</a>
                <a ng-disabled="isExperimentReserving()" href="#" class="btn btn-primary reserve-btn reserve-free-btn"
                   id="reserve-free-btn" ng-click="reserve({ where: 'window' })">{{ 'RESERVE_WINDOW'|translate }}</a>
                -->
            </span>
        </div>

    </div>

    <div class="col-xs-12 col-sm-8 col-md-3 col-md-pull-7">
        <div class="well text-center">
            <p>
                <img ng-src="{{ experiment['logo_link'] }}">
            </p>
            <p>
                <strong>{{ "EXPERIMENT"|translate }}:</strong> {{ experiment["name"] }}
            </p>

            <p>
                <strong>{{ "CATEGORY"|translate }}:</strong> {{ experiment["category"] }}
            </p>
        </div>

        <div ng-show="latestuses.uses.length > 0">
            <h4>{{ "MY_LATEST_USES"|translate }}</h4>
            
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>{{ "DATE"|translate }}</th>
                        <th>{{ "DETAILS"|translate }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="use in latestuses.uses">
                        <td>{{ use.start_date_formatted }}</td>
                        <td><a href="{{ use.link }}">Details</a></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div ng-show="latestuses.uses.length == 0">
            <h5>{{ "HAVENT_USED_THE_LAB_BEFORE"|translate }}</h5>
        </div>
    </div>


    <div class="col-xs-12 col-sm-4 col-md-2 well" ng-cloak ng-show="stats.status">
        <h4>Stats</h4>
        <p><strong>Number of uses:</strong> {{ stats.total_uses }}</p>
        <p><strong>Status:</strong> <span style="color: {{ stats.status_color }}">{{ stats.status|translate }}</span></p>
    </div>

</div><commit_msg>Improve bootstrap in the lab screen<commit_after><div class="row">

    <div class="col-xs-12 col-md-7 col-md-push-3">
        <!-- TODO: support pictures, videos, and so on. Use specification for experiment, not database for this. -->
        <!-- TODO: should we support analytics? e.g., how many accesses have there been, etc. -->
        <p>
            <strong>{{ "DESCRIPTION"|translate }}:</strong> {{ experiment['description'] }}
        </p>

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li ng-repeat-start="exp_image in experiment.images.items" data-target="#carousel-example-generic" data-slide-to="0" class="active" ng-if="$first"></li>
            <li ng-repeat-end="exp_image in experiment.images.items" data-target="#carousel-example-generic" data-slide-to="$index" ng-if="!$first"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div ng-repeat-start="exp_image in experiment.images.items" class="item text-center active" style="height: 350px" ng-if="$first">
                <img ng-src="{{ exp_image }}" alt="image">
            </div>
            <div ng-repeat-end class="item text-center" style="height: 350px" ng-if="!$first">
                <img ng-src="{{ exp_image }}" alt="image">
            </div>

          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

        <br>
        <div class="well col-xs-10 col-xs-offset-1 col-lg-6 col-lg-offset-2 text-center">
            <span style="margin-right: 15px">
                <!-- Math.floor instead of number:0 => number:0 is round, so 1.666 says 2 -->
                <strong>{{ "TIME"|translate }}:</strong> <span ng-show="experiment['time'] >= 3600">{{ Math.floor(experiment['time'] / 3600) }}:</span><span ng-show="experiment['time'] >=3600 && experiment['time'] % 3600 / 60 < 10">0</span><span ng-show="experiment['time'] >= 60">{{ Math.floor(experiment['time'] % 3600 / 60) }}:</span><span ng-show="experiment['time'] % 60 < 10">0</span>{{ experiment['time'] % 60 }}
            </span>

            <span>
                <a ng-disabled="isExperimentReserving() || isExperimentLoading()" href="#" class="btn btn-primary reserve-btn reserve-frame-btn"
                   id="reserve-frame-btn" ng-click="reserve({ where: 'frame' })">{{ 'RESERVE'|translate }}</a>
                <!-- 
                <a ng-disabled="isExperimentReserving()" href="#" class="btn btn-primary reserve-btn reserve-frame-btn"
                   id="reserve-frame-btn" ng-click="reserve({ where: 'frame' })">{{ 'RESERVE_FRAME'|translate }}</a>
                <a ng-disabled="isExperimentReserving()" href="#" class="btn btn-primary reserve-btn reserve-free-btn"
                   id="reserve-free-btn" ng-click="reserve({ where: 'window' })">{{ 'RESERVE_WINDOW'|translate }}</a>
                -->
            </span>
        </div>

    </div>

    <div class="col-xs-10 col-xs-push-1 col-sm-push-0 col-sm-8 col-md-3 col-md-pull-7">
        <div class="well text-center">
            <p>
                <img ng-src="{{ experiment['logo_link'] }}">
            </p>
            <p>
                <strong>{{ "EXPERIMENT"|translate }}:</strong> {{ experiment["name"] }}
            </p>

            <p>
                <strong>{{ "CATEGORY"|translate }}:</strong> {{ experiment["category"] }}
            </p>
        </div>

        <div ng-show="latestuses.uses.length > 0">
            <h4>{{ "MY_LATEST_USES"|translate }}</h4>
            
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>{{ "DATE"|translate }}</th>
                        <th>{{ "DETAILS"|translate }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="use in latestuses.uses">
                        <td>{{ use.start_date_formatted }}</td>
                        <td><a href="{{ use.link }}">Details</a></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div ng-show="latestuses.uses.length == 0">
            <h5>{{ "HAVENT_USED_THE_LAB_BEFORE"|translate }}</h5>
        </div>
    </div>


    <div class="col-xs-10 col-xs-push-1 col-sm-push-0 col-sm-4 col-md-2 well" ng-cloak ng-show="stats.status">
        <h4>Stats</h4>
        <p><strong>Number of uses:</strong> {{ stats.total_uses }}</p>
        <p><strong>Status:</strong> <span style="color: {{ stats.status_color }}">{{ stats.status|translate }}</span></p>
    </div>

</div>
{'fraction_non_alphanumeric': 0.19102539251792983, 'fraction_numerical': 0.015216127156425664, 'mean_word_length': 2.053862089375555, 'pattern_counts': {'":': 0, '<': 253, '<?xml version=': 0, '>': 259, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3636501', 'n_tokens_mistral': 3317, 'n_tokens_neox': 3055, 'n_words': 626}